jquery - jQuerytableDnDはドラッグアンドドロップを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

わかりました-問題が見つかりました。実際には変更されない「tbody」要素に livequery を適用していました。変更されるのはコンテンツであるため、呼び出しオブジェクトをその「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');
                    });
                }
            });
        });
    });
}