AJAXによって動的に生成されたテーブルのドラッグ＆ドロップを行う方法

Question

ドラッグアンドドロップのためにTableDnDプラグインを使用しています。行はドラッグ＆ドロップでうまくいきますが、AJAXによって動的に生成されたテーブルの行をドラッグアンドドロップする場合、コードは機能していないようです。誰も私が動的に生成されたテーブルのためにこの仕事をする方法を説明することができますか？あなたはDOMがされた後がをロード（）.tableDnDを適用するため

$(document).ready(function() { 
     // Drag and drop 
     $("#table-1").tableDnD({ 
      onDragClass: "myDragClass", 
      onDrop: function (table, row) { 
       var rows = table.tBodies[0].rows; 
       for (var i = 0; i < rows.length; i++) { 
        debugStr += rows[i].id + " "; 
        alert(rows[i].id); 
       } 
      }, 
      onDragStart: function (table, row) {} 
     }); 
    }); 

Answer 1

あなたの問題が発生することがあります。 DOMの読み込み後に要素を動的に追加すると、その要素には適用されません。

あなたはDOMの変化を検出し、（.tableDnDを適用することができ）、その後：

$(document).bind('DOMNodeInserted', function(){ 

    $("#table-1").tableDnD({ 
     onDragClass: "myDragClass", 
     onDrop: function (table, row) { 
      var rows = table.tBodies[0].rows; 
      for (var i = 0; i < rows.length; i++) { 
       debugStr += rows[i].id + " "; 
       alert(rows[i].id); 
      } 
     }, 
     onDragStart: function (table, row) {} 
    }); 

}); 

あるいはさらに良い：

$(document).ready({ 

    applyDnD(); 
    $(document).bind('DOMNodeInserted', applyDnD); 

    function applyDnD() { 
     $("#table-1").tableDnD({ 
      onDragClass: "myDragClass", 
      onDrop: function (table, row) { 
       var rows = table.tBodies[0].rows; 
       for (var i = 0; i < rows.length; i++) { 
        debugStr += rows[i].id + " "; 
        alert(rows[i].id); 
       } 
      }, 
      onDragStart: function (table, row) {} 
     }); 
    }; 

});