添加新行后拖放不起作用

我正在使用jquery.tablednd.0.7.min.js来拖放表行。 当我在表中动态添加新行（即使用javascript添加行）时，新行没有拖动n drop。 可以拖动表中已存在的其他行。

我认为这个新行没有与jQuery拖放代码同步。

我正在添加这样的新行。

这是jquery dragnDrop文件代码。

在页面加载时，我使用此代码将此function分配给表

 $(document).ready(function() { $("#tableId").tableDnD({ onDragClass : "myDragClass", onDrop : function(table, row) { }, onDragStart : function(table, row) { console.log("drag start"); } }); }); 

Answer 1

您没有显示执行行追加的代码，这是您需要重新绑定tableDnD相关事件的位置，但它看起来像这样：

 $(document).ready(function() { //on load addTableDnD(); //appending a row $(".add-row").click(function() { $("").appendTo("#tableId"); addTableDnD(); // re-attach events to pick up the new row. }); }); function addTableDnD() { $("#tableId").tableDnD({ onDragClass : "myDragClass", onDrop : function(table, row) { }, onDragStart : function(table, row) { console.log("drag start"); } }); } 

Answer 2

只需使用$("#tableId").tableDnDUpdate()

来自文档：

Will update all the matching tables, that is it will reapply the mousedown method to the rows (or handle cells). This is useful if you have updated the table rows using Ajax and you want to make the table draggable again. The table maintains the original configuration (so you don't have to specify it again).

Answer 3

请试试这个：

 function sample() { $("#tableId").tableDnD({ onDragClass : "myDragClass", onDrop : function(table, row) { }, onDragStart : function(table, row) { console.log("drag start"); } }); } 

在body onload中调用sample（）函数，并在每个新的行输入时间再次调用sample（）函数。

注意：要避免两次出现问题，请尝试在jquery中使用“live”function

Answer 4

很简单：

 $("#tableId").tableDnDUpdate() 

添加新行后。

Answer 5

如果新添加的行tr与现有行具有相同的id，则tablednd可能无法使其可拖动。