Question

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的初始化。

我让它与肮脏的黑客一起工作，但我想了解正确的方法。

Dirty Hack ：

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可排序选项，事件和方法都可用”。我也切换到标准的可排序小部件进行测试并遇到了同样的问题，所以我不认为它是插件。

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

在AJAX html替换后，jQuery Sortable冻结

0 个答案: