jquery - jQuery，如何在 .load() 之后重新绑定 html 元素

Question

我有一个 html-component 将在单击按钮后重新加载。组件的某些元素绑定到单击和悬停处理程序。一切正常，直到.load()调用 -function 重新加载组件。已加载组件的元素未绑定到相应的处理程序。

那时我将 js-script 放在组件的末尾，以便它绑定元素。但是在组件重新加载之后，组件外部的元素现在是未绑定的。

我已经尝试过.on(), .live(), .bind(), .click(), ... 没有任何效果。

Answer 1

您应该能够调用该.load()方法并创建一个回调，您可以在其中重新绑定元素。

例如：

$(document).ready(function() {
    ...initially bind all event handlers for page (including elements to be reloaded)...

    $("#someButton").on("click", function() { 
        $("#elementToReload").load("page-to-load.html", function() {
             ...bind all event handlers for this and containing elements here...
        });
    });
});

如果您对此有任何疑问，请告诉我。祝你好运！:)

Answer 2

我不确定您绑定事件的方式，但基本上，如果您以这种方式做某事：

$('.your-class').on('click', function (e) {[...]});

您可能最好将其委托给未重新加载的文档。

$(document).on('click', '.your-class', function (e) {[...]});

您可以确定即使在脚本执行时不存在的元素也会被绑定，因为它们稍后将成为您文档的一部分。