jquery函数不能对异步加载的dom元素起作用

Question

我在 DOM 元素上编写 jQuery 事件处理程序，这些元素尚未在页面中，但可能异步加载到页面中。我观察到的是，这些事件处理程序似乎没有意识到某些新元素被添加到 DOM ，并且他们需要在触发时对它们采取行动。

我在观察中是对的吗？我如何实现此功能？

Answer 1

如果您希望事件处理程序处理动态添加的内容，则需要使用on

$(document).on("click", "someCssSelector", function(){
    //your code here
});

当然，这会导致您网页上任何位置的所有点击都被观看。为了提高效率，请查看您是否可以构建页面，以便所有要处理click事件的元素都位于一个容器中。即，如果要将所有这些元素添加到id为foo的div中，您可以更有效地编写上述内容

$("#foo").on("click", "someCssSelector", function(){
    //your code here
});

---

如果你正在使用jQuery＆lt; 1.7，你要使用代表

$(document).delegate("someCssSelector", "click", function(){
    //your code here
});

Answer 2

  

我在观察中是对的吗？

是

  

如何实现此功能？

如果您使用的是jQuery 1.7 +，请使用.on函数订阅这些事件处理程序：

$(document).on('click', '.someSelector', function() {
    ...
});

或使用.delegate函数，如果您使用的是旧版本（高于1.4.3）：

$(document).delegate('.someSelector', 'click', function() {
    ...
});

如果您知道这些元素将被添加到某个容器中，那么您可以使用比document更具体的根来提高性能。

如果您使用的是某些史前版本，则可以使用.live()：

$('.someSelector').live('click', function() {
    ...
});