Javascript 如何通过拖放操作来处理AJAX动态生成的表

所以我使用TableDnD插件进行拖放。行确实可以很好地进行拖放，但是当我想要获得由AJAX动态生成的表的拖放行时，代码似乎不起作用。有人能解释一下我是如何为动态生成的表实现这一点的吗

  $(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) {}
      });
  });

$（文档）.ready（函数（）{
//拖放
$（“#表1”）。表D({
onDragClass:“myDragClass”，
onDrop：函数（表、行）{
var rows=table.tBodies[0]。行；
对于（变量i=0；i

您的问题可能是由于在加载DOM后应用了.tableDnD（）而引起的。如果在DOM加载后动态添加元素，它将不会应用于这些元素

您可以检测DOM中的更改并应用.tableDnD（），然后：

$（document）.bind（'domandeinserted'，function（）{
$（“#表1”）。表D({
onDragClass:“myDragClass”，
onDrop：函数（表、行）{
var rows=table.tBodies[0]。行；
对于（变量i=0；i

或者更好：

$(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) {}
        });
    };

});

$（文档）。准备好了吗({
applyDnD（）；
$（document）.bind（'DOMNodeInserted'，applyDnD）；
函数applyDnD（）{
$（“#表1”）。表D({
onDragClass:“myDragClass”，
onDrop：函数（表、行）{
var rows=table.tBodies[0]。行；
对于（变量i=0；i

$(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) {}
        });
    };

});