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

});