jquery-ui - AJAX HTML置換後にjQuery Sortableがフリーズする

Question

jQuery コード: Sortable 設定をすべて削除しました。それらが適切であると思われる場合は、それらを元に戻すことができます.

$('#navsort').sortable({ ... });

$("#content").on('click', '#submit_menu', function (event){
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "menu-ajax.php",
        data: { data:$('#form').serialize() }
    }).done(function (response) {
        $('#content').hide().html(response).fadeIn('slow');
    });
});

HTML コード: 実際のコードには多くの PHP やその他の処理が含まれているため、これは単純化されたバージョンです。

<div id="content">
    <form method="post" id="form">
        <a href="#" id="submit_menu">Save</a>
        <ol id="navsort">
            ...
        </ol>
    </form>
</div>

ご覧のとおり、Sortable に添付された要素を含むフォーム全体が、フォームの送信時に AJAX を介して (それ自体の同一のコピーで) 置き換えられます。これは、Sortable が機能しなくなったときです。

Sortable が初期化されたとき、新しいフォームは DOM の一部ではなかったため、置き換えられたフォームと同一であるにもかかわらず、添付されていないことを理解しています。.on()また、ページが最初にロードされたときに存在する要素とその後に追加された要素との間で を使用して委任する方法も理解しています。私が理解していないのは、この概念を Sortable の初期化に適用する方法です。

汚いハックで動作するようになりましたが、正しい方法を理解したいです。

ダーティハック：

function dirtyhack(){
    $("selector").on('event', 'target', function (){ ... });
}
dirtyhack();

$("#content").on('click', '#submit_menu', function (event){
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "menu-ajax.php",
        data: { data:$('#form').serialize() }
    }).done(function (response) {
        $('#content').hide().html(response).fadeIn('slow');
        dirtyhack();
    });
});

そのため、Sortable はページが読み込まれると初期化され、AJAX が Sortable がアタッチされている要素の置換が完了すると再初期化されます。これは正しいかもしれませんが、間違っているように感じます。

開示：私は実際にはSortableの代わりにnestedSortableプラグインを使用していますが、プラグインの作成者は、プラグインを通じて「jQuery Sortableのすべてのオプション、イベント、およびメソッドが利用可能」であると主張しています。また、テストのために標準のソート可能なウィジェットに切り替えましたが、同じ問題が発生したため、プラグインではないと思います。

プラグイン URL: https://github.com/mjsarfatti/nestedSortable/tree/2.0alpha