Question

我在列表上使用jquery sortable来移动元素。它工作正常，但我的页面上还有一个ajax面板，可以将新项目添加到列表中。一旦ajax将新元素发送到列表，我就不能再对它进行排序。我有这个电话：

$("#MainContent_previewlist").sortable({
            update: function (event, ui) { }
        });

我不熟悉javascript。我是否需要调用某个事件来获取jquery来评估ajax之后的新列表？

Answer 1

当页面加载时，jQuery绑定到id。当您调用Ajax并刷新页面上的内容时，您将失去绑定。您有两种方法可以解决此问题。第一种是在Ajax调用结束时再次调用bind。 E.g：

$.ajax(function() {
    //... your ajax
    success: function(html) {
        // update page with html
        Rebind();
    }
});

function Rebind() {
    $("#MainContent_previewlist").sortable({
        update: function (event, ui) { }
    });
}

如果您正在处理监听事件（点击，更改，更新等），那么您可以绑定不会更新的内容，例如文档。 E.g：

$(document).on('click', '#my-id', function() {
    // do something...
});

该绑定将通过Ajax调用持续存在，但不建议您使用该方法，除非必须，因为这意味着事件通过DOM中的每个元素传递，只有在它到达文档时才会被拾取

Answer 2

就像Styphon说的那样，尝试绑定到不能通过ajax重新加载的东西。但我建议你不要绑定到文件更好地绑定到'body'或者如果你有一个容器绑定到它的div。我用你使用的id改进了回答一个完整的完整例子的问题，在这种情况下，$（this）是你想要排序的元素。试试这个并告诉我们：

$('body').on('click', '#MainContent_previewlist', function() {
    $(this).sortable({
        update: function (event, ui) { }
    });
});

jjery在ajax之后不活动

2 个答案: