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 对象，但是当它稍后存在并被点击时，点击事件将冒泡到@ 987654327@ 对象，它将看到它起源于 #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 匹配的任何元素上click 时，事件会冒泡到主文档——只要没有其他侦听器调用event.stopPropagation() 方法——这将超过冒泡父元素的事件。

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

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

编辑：

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

Answer 4

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

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

基本上，查看文档中的点击事件并为#child 过滤它们。

Answer 5

我知道答案有点晚了，但我已经为 .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() 之前包含它。

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...});
}

调用 caller();在这样的页面中创建对象之后。

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

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