jquery 函数不适用于异步加载的 dom 元素答案

【问题标题】：jquery functions dont work on dom elements loaded asynchromouslyjquery 函数不适用于异步加载的 dom 元素
【发布时间】：2012-02-19 20:18:53
【问题描述】：

我在 DOM 元素上编写了 jQuery 事件处理程序，这些元素尚未在页面中，但可能会异步加载到页面中。我观察到的是，这些事件处理程序似乎无法识别某些新元素已添加到 DOM 中，并且它们需要在触发时对其进行操作。

我的观察是否正确？如何实现此功能？

【问题讨论】：

【解决方案1】：

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

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

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

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

如果你使用 jQuery

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

【讨论】：

【解决方案2】：

我的观察是否正确？

是的。

如何实现此功能？

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

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

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

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

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

如果你使用的是史前版本，你可以选择.live()：

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

【讨论】：