JQuery - 如何實現動態添加可拖放錶行的事件偵聽器？

我得到了一個可編輯的表格，您可以在其中使用按鈕動態添加行，但即使他們具有droppable-Selektor，我也不能將可拖動的東西放入新行中。我試圖修復它與代表和droppable()爲新的行，但失敗。任何提示或想法？JQuery - 如何實現動態添加可拖放錶行的事件偵聽器？

Here is my Code:http://jsfiddle.net/gM3bF/7/

來源

2013-10-22 user2718671

您必須將.droppable(options)添加到您的新行中。

爲了使其工作，我添加了一個類你新行：

var newtr = $('<tr />', { class: 'sortable-row ui-droppable newRow' });

現在添加可投放到該NEWROW（並最終消除這種新無用類）：

$(".newRow") .droppable({ 
     revert: true, 
     drop: function (event, ui) { 

      var id = ui.draggable.prop('id'); 
      if (id == "blurk") { var content = blurkContent(); }; 
      var title = $(event.target).closest('tr').children()[2]; 
      $(title).html(unescape(content[0])); 
      var description = $(event.target).closest('tr').children()[3]; 
      $(description).html(unescape(content[1])); 
      var link = $(event.target).closest('tr').children()[4]; 
      $(link).html(content[2]); 
      var thumbnail = $(event.target).closest('tr').children()[5]; 
      $(thumbnail).html(content[3]); 

     } 
}) 
$(".newRow").removeClass("newRow");

當然，您可以簡化爲此添加的參數。

FIDDLE

希望它可以幫助

來源

2013-10-22 09:58:06 EdenSource

謝謝你洙多！有效！只需添加「.new row」並從下面複製該可拖放功能即可。現在我的腳本長度增加了一倍，但沒關係，只要它有效;） – user2718671

很高興幫助。您可以在「drop」參數中定義一個包含該函數的新函數，現在可以在初始化droppable和添加新的可放置行時調用此新函數。隨你便。見編輯的FIDDLE：http://jsfiddle.net/zhULn/1/ – EdenSource

哦，是的，謝謝你！我從你身上學到了很多東西，並越來越習慣於javascript/jquery。非常感謝！ :) – user2718671

使用：

用法：

$(document).on('click', 'input.addButton', function(){ alert('clicked'); }); 

$(document).on('dblclick', '#editableTable td', function(){ alert('td clicked'); }); 

$(document).on('click', '#editableTable input.deleteButton', function(){ alert('delete clicked'); });

這些你可以聲明一旦文檔準備事件處理程序中。

然而，

如果你有動態添加可拖動的元素，一定要打電話.draggable({})他們被添加到DOM後。

希望有所幫助。

來源

2013-10-22 09:57:53 geevee

JQuery - 如何實現動態添加可拖放錶行的事件偵聽器？

回答

相關問題