javascript - 如何通过 AJAX 对动态生成的表进行拖放操作

Question

所以我使用 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) {}
      });
  });

Answer 1

您的问题可能是因为您在加载 DOM 后应用.tableDnD ( )引起 的。如果您在 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) {}
        });
    };

});