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

Ok -找到问题所在。我将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();