0

jQuery 代码：我删除了所有的可排序设置。如果你觉得它们是相关的，我可以把它们放回去。

$('#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 附加到的元素时重新初始化。也许这是对的，但感觉不对。

披露：我实际上是使用 nestedSortable 插件代替 Sortable，但插件作者声称通过他的插件“所有 jQuery Sortable 选项、事件和方法都可用”。我也确实切换到标准的 Sortable Widget 进行测试并且遇到了同样的问题，所以我不认为它是插件。

插件网址：https ://github.com/mjsarfatti/nestedSortable/tree/2.0alpha

4

0 回答 0