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

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

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

当您对任何元素进行匹配时，该事件会冒泡到主文档（只要没有其他侦听器调用方法），这将在事件冒泡到父元素之上。click.selectorevent.stopPropagation()

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

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

编辑：

显然，您可以侦听的最接近的父元素更好，并且您可以使用任何元素来代替，只要您要监视事件的子元素在该父元素中......但这确实与问题无关。document

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

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

试试这个：

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

来自 $.on（） 文档：

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

当您调用元素时，您的元素不存在，因此该事件不会绑定（与 不同）。但是，确实存在，因此将事件绑定到该事件是可以的。#child$.on()$.live()#parent

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

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

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

事件处理程序将附加到对象上，每当源自 的 click 事件冒泡到它时，它都会触发 click 处理程序。这称为委托事件处理（事件处理委托给父对象）。#parent#child

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

1.7 中 .live（） 的等价物如下所示：

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

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

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

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

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

将代码编写为：

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

调用 caller（）;在页面中创建对象后，如下所示。

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

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

我知道现在给出答案有点晚了，但我为 .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（） 之前包含它即可。