jQuery .live() 与 .on() 方法在加载动态 html 后添加点击事件

Question

我正在使用 jQuery v.1.7.1，其中 .live() 方法显然已被弃用。

我遇到的问题是，当使用以下方法将 html 动态加载到元素中时：

$('#parent').load("http://..."); 

如果我尝试添加单击事件，它不会使用以下方法之一注册该事件：

$('#parent').click(function() ...); 

或者

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

实现此功能的正确方法是什么？它似乎只适用于 .live() 对我来说，但我不应该使用该方法。请注意，#child 是动态加载的元素。

谢谢。

Answer 1

如果您希望单击处理程序适用于动态加载的元素，则可以在父对象（不会动态加载）上设置事件处理程序，并为其提供一个与动态对象匹配的选择器，如下所示

$('#parent').on("click", "#child", function() {});

：将附加到 #parent 对象，并且每当源自 #child 的点击事件冒泡到该对象时，它都会触发您的点击处理程序。这称为委托事件处理（事件处理被委托给父对象）。

这样做是因为即使 #child 对象尚不存在，但当它稍后存在并被单击时，您也可以将事件附加到 #parent 对象，单击事件将冒泡到 #parent 对象，它将看到它源自 #child 并且有一个用于单击 #child 的事件处理程序 并触发您的事件。

Answer 2

试试这个：

$('#parent').on('click', '#child', function() {
    // Code
});

从 $.on() 文档：

事件处理程序仅绑定到当前选定的元素；他们
当您的代码调用 .on() 时，页面上必须存在。

当您调用 $.on() 时，您的 #child 元素不存在，因此事件未绑定（与 $.live() 不同） ）。然而，#parent 确实存在，因此将事件绑定到它就可以了。

上面代码中的第二个参数充当“过滤器”，仅在事件从 #child 冒泡到 #parent 时触发。

Answer 3

$(document).on('click', '.selector', function() { /* do stuff */ });

编辑：我提供了有关其工作原理的更多信息，因为……的话。
在本示例中，您将在整个文档上放置一个侦听器。

当您单击任何与.selector匹配的元素时，事件就会冒泡到主文档 - 只要没有其他侦听器调用事件.stopPropagation() 方法——该方法会将事件冒泡到父元素。

您不是绑定到特定元素或元素集，而是侦听来自与指定选择器匹配的元素的任何事件。这意味着您可以一次性创建一个侦听器，该侦听器将自动匹配当前现有元素以及任何动态添加的元素。

这是明智的，有几个原因，包括性能和内存利用率（在大型应用程序中）

编辑：

显然，您可以监听的最接近的父元素更好，并且您可以使用任何元素来代替 document 只要您想要监视事件的子元素位于该父元素内...但这实际上与问题没有任何关系。

Answer 4

1.7 中的 .live() 等效项如下所示：

$(document).on('click', '#child', function() ...); 

基本上，观察文档中的单击事件并过滤它们以查找 #child。

Answer 5

我知道现在回答有点晚了，但我已经为 .live() 方法创建了一个polyfill。我已经在 jQuery 1.11 中测试过它，它似乎工作得很好。我知道我们应该尽可能实现 .on() 方法，但在大型项目中，无论出于何种原因都不可能将所有 .live() 调用转换为等效的 .on() 调用，以下可能work：

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

只需在加载 jQuery 之后和调用 live() 之前包含它即可。

Answer 6

.on() 适用于 jQuery 1.7 及以上版本。如果您有旧版本，请使用以下命令：

$("#SomeId").live("click",function(){
    //do stuff;
});

Answer 7

我在项目中使用了“live”，但我的一位朋友建议我应该使用“on”而不是 live。
当我尝试使用它时，我遇到了像您一样的问题。

在我的页面上，我动态创建按钮表行和许多 dom 内容。但是当我使用的时候魔法就消失了。

其他解决方案就像像孩子一样使用它，每次点击时都会调用您的函数。
但我找到了一种方法让它再次发生，这就是解决方案。

将代码编写为：

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Call caller();在页面中创建对象后，如下所示。

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

通过这种方式，当您的函数不应该每次点击页面时都会被调用。