jQuery .live（）vs .on（）方法，用于在加载动态html后添加click事件

我正在使用jQuery v.1.7.1，显然不赞成使用.live（）方法。

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

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

如果我尝试在之后添加click事件，则不会使用以下两种方法之一注册事件：

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

要么

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

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

谢谢。

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

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

事件处理程序将附加到该#parent对象，并且只要单击事件在源于的事件上冒泡#child，它就会触发您的单击处理程序。这称为委托事件处理（事件处理委托给父对象）。

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

试试这个：

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

从$.on()文档中：

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

你#child当你调用元素不存在$.on()就可以了，因此事件未绑定（不同$.live()）。#parent但是，确实存在，因此将事件绑定到此就可以了。

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

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

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

当您找到click匹配的任何元素时.selector，该事件就会冒泡直到主文档（只要没有其他侦听器调用此event.stopPropagation()方法），该事件就会使事件冒泡到父元素。

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

出于某些原因，这很聪明，包括性能和内存利用率（在大型应用程序中）

编辑：

显然，您可以监听的最接近的父元素更好，并且您可以使用任何元素代替，document只要您要监视事件的子元素在该父元素之内即可……但这确实没有任何事情要做这个问题。

1.7中的.live（）等效项如下所示：

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

基本上，请在文档中查看单击事件并为#child对其进行过滤。

我知道答案来得有点晚，但是我为.live（）方法创建了一个polyfill。我已经在jQuery 1.11中对其进行了测试，并且看起来效果很好。我知道我们应该尽可能地实现.on（）方法，但是在大型项目中，无论出于何种原因都无法将所有.live（）调用转换为等效的.on（）调用，以下可能工作：

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

只需在加载jQuery之后且调用live（）之前将其包括在内即可。

.on（）适用于jQuery 1.7及更高版本。如果您使用的是旧版本，请使用以下命令：

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

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

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

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

将代码写为：

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

致电caller（）; 在这样的页面中创建对象之后。

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

通过这种方式，当您并非每次单击页面时都会调用您的函数。