jquery函数不能在异步加载的dom元素上工作

I wrote jQuery event handlers on DOM elements that are not yet in the page but might be loaded asynchronously into the page. What I observed was these event handlers seem to not recognize that some new elements were added to the DOM and that they need to act on them on triggering.

我在页面中还没有的DOM元素上编写了jQuery事件处理程序，但可能会异步加载到页面中。我观察到的是，这些事件处理程序似乎不认识到一些新元素被添加到DOM中，并且它们需要对它们进行触发。

Am I right in my observation? How do I achieve this functionality?

我的看法对吗?我如何实现这个功能?

2 个解决方案

#1

If you want event handlers to work on dynamically added content, you need to use on

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

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

Of course this will cause all clicks anywhere on your page to be watched. To be more efficient, see if you can structure your page so that all of these elements whose click event you want to handle will be in one container. ie, if all of these elements are going to be added to a div with an id of foo, you'd write the above more efficiently as

当然，这会导致页面上的所有点击都被监视。为了更有效，请查看是否可以构造页面，以便您想要处理的单击事件的所有元素都将位于一个容器中。比方说，如果所有这些元素都要添加到一个id为foo的div中，那么你可以更有效地将上面的内容写成as

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

If you're using jQuery < 1.7, you'd use delegate

如果您使用jQuery < 1.7，您应该使用委托

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

#2

Am I right in my observation?

我的看法对吗?

Yes.

是的。

How do I achieve this functionality?

我如何实现这个功能?

Using the .on function to subscribe to those event handlers if you are using jQuery 1.7+:

使用.on函数在使用jQuery 1.7+时订阅这些事件处理程序:

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

or using the .delegate function if you are using an older version (higher than 1.4.3):

或使用较旧版本(高于1.4.3)的.delegate功能:

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

For both you could use a more specific root than document to improve performance if you know that those elements will be added to some container for example.

如果您知道这些元素将被添加到某个容器中，那么您可以使用更特定的根而不是文档来提高性能。

And if you are using some prehistoric version you could go with .live():

如果你正在使用一些史前版本，你可以使用。live():

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

#1