jquery - jQuery tableDnD 绑定拖放到 ajax 返回的行

Question

我有一个表，在添加新记录后替换所有行 - 所有这些都使用 ajax 调用发生，因此无需重新加载。

一旦在容器中替换了记录，tableDnD 似乎不再适用于新记录 - 我必须重新加载页面才能再次触发。

我尝试通过以下方式使用 livequery() 插件，但似乎无法解决问题（obj 是包含所有行的 tbody 对象）：

sortRows : function(obj) {
    "use strict";
    obj.livequery(function() {
        $.each($(this), function() {
            var thisTbody = $(this);
            var thisUrl = thisTbody.attr('data-url');
            thisTbody.tableDnD({
                onDragClass: "trActive",
                onDrop: function(thisTable, thisRow) {
                    var thisArray = [];
                    var thisRows = thisTbody.find('tr');
                    $(thisRows).each(function() {
                        thisArray.push($(this).attr('id').split('-')[1]);
                    });
                    $(thisRows).promise().done(function() {
                        $.post(thisUrl, { items : thisArray }, 'json');
                    });
                }
            });
        });
    });
}

Answer 1

好的 - 发现了问题。我将 livequery 应用于“tbody”元素，它实际上并没有改变——它是改变的内容，所以一旦我将调用对象更改为那个“tbody”的“tr”——现在一切正常。这是我的代码现在的样子：

sortRows : function(obj) {
    "use strict";
    obj.find('tr').livequery(function() {
        var thisObj = $(this).parent('tbody');
        $.each(thisObj, function() {
            var thisTbody = $(this);
            var thisUrl = thisTbody.attr('data-url');           
            thisTbody.tableDnD({
                onDragClass: "trActive",
                onDrop: function() {
                    var thisArray = [];
                    var thisRows = thisTbody.find('tr');
                    $(thisRows).each(function() {
                        thisArray.push($(this).attr('id').split('-')[1]);
                    });
                    $(thisRows).promise().done(function() {
                        $.post(thisUrl, { items : thisArray }, 'json');
                    });
                }
            });
        });
    });
}

Answer 2

每次在表上放置新寄存器时，您都可以更新表，如下所示：

$("#your_table_id").tableDnDUpdate();