ajax后jquery无效答案

【问题标题】：jquery inactive after ajaxajax后jquery无效
【发布时间】：2014-06-10 16:03:02
【问题描述】：

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

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

我不熟悉javascript。我需要调用一些事件来让 jquery 在 ajax 之后评估新列表吗？

【问题讨论】：

在 ajax 调用之后你需要调用这个
您能否添加您的剩余代码。一个 jsFiddle 会有所帮助。
在您的 ajax 调用函数结束时重新初始化可排序，例如 -- $("#MainContent_previewlist").sortable(); -- 看看有没有帮助

标签： jquery ajax jquery-ui jquery-ui-sortable

【解决方案1】：

当页面加载时，jQuery 绑定到 id。当您调用 Ajax 并刷新页面上的内容时，您将失去绑定。您有两种选择来解决此问题。第一种是在 Ajax 调用结束时再次调用 bind。例如：

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

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

如果您正在处理监听事件（单击、更改、更新等），那么您可以绑定未更新的内容，例如文档。例如：

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

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

【讨论】：

【解决方案2】：

就像 Styphon 所说，尝试绑定到不会通过 ajax 重新加载的东西。但我建议您不要绑定到文档，最好绑定到“正文”，或者如果您有一个容器绑定到它的 div。我改进了使用您使用的 id 回答完整示例的问题，在这种情况下 $(this) 是您要使其可排序的元素。试试这个并告诉我们：

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

【讨论】：