jQuery - 从live()方法迁移到on()方法

Question

我知道 "live" 函数现在已被弃用。如何迁移以下代码以使用新的 "on" 函数？

$('a.action').live( "click", function (evt) {

        // Do stuff 

}

场景是a.action是动态创建的。我尝试过以下方法，但都没有成功：

$('a.action').on( "click", function (evt) {

        // Do stuff 

}

- Jonathan Wold

---

你也更新到最新的jQuery了吗？而且你两个都缺少右括号。有人会抱怨的。 - Kai Qing

JavaScript控制台有任何错误吗？ - Matt Ball

Answer 1

如果您想要实际的 .live() 类型性能，在添加事件处理程序时，a.action 对象不必存在，那么您应该找到始终存在的所有 a.action 元素的父 DOM 对象，并像这样绑定 .on()：

$(parent selector).on('click', 'a.action', function (evt) {
    // Do stuff
});

那个父级元素应尽可能靠近对象，以达到最大效率。因此，将事件绑定到document是不可取的。

事实上，.live()被弃用的原因之一就是它绑定到document对象上，当有太多事件流经一个对象时（事件分发性能降低），很容易导致性能问题。

欲了解更多信息，请参见我的其他相关答案：

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

jQuery新的on()方法与live()方法在性能上的比较

所有jquery事件都应该绑定到$(document)吗？

- jfriend00

---

我在想是否有什么地方漏了..我复制了你的代码，它可以在页面上的初始元素上工作，但对于新元素仍然无法工作，而"live"却可以。这与元素的创建方式有关吗？ - Jonathan Wold

+1，还有一点需要提到的是，一些浏览器/操作系统不会将事件传播到“文档”级别 - 这也是绑定处理程序不可取的另一个原因。 - ahren

@JonathanWold - 重要的是元素已经在DOM中，并且它们是事件处理程序绑定对象的后代，而不是如何创建这些元素。如果.live()可以工作而委托形式的.on()无法工作，则您可能没有选择正确的共同父元素或代码存在错误。 - jfriend00

@jfriend00 即使使用.on()的委托形式对已存在的元素有效，是否仍然可能存在父级选择不当或错误的情况？ - Jonathan Wold

@JonathanWold - 这取决于您添加新元素的位置（它们必须是父选择器的后代）以及它们是否正确匹配 .on() 参数中的选择器。如果没有看到您添加新元素的代码、确切的 .on() 代码和您的 HTML，我们无法诊断此问题。 - jfriend00

@jfriend00 感谢您的跟进 - 我打算接受这个答案（它很有道理），进行实验，并在有任何进一步困难的情况下回报。 - Jonathan Wold

Answer 2

$(document).on('click', 'a.action', function (evt) {
    // Do stuff
});

- kendaleiv

---

小心，这可能会被某人踩。官方文档的第一个例子就像 OP 所说的那样。 - Kai Qing

jfriend 简洁地指出，将绑定到始终存在的直接父级是实现 ajax 方法的方式，尽管您的方法在技术上可能有效，但更好的做法是针对紧密的目标。 - Kai Qing

根据您的代码，这里使用$(document)比使用$('#container')更快：http://jsperf.com/jquery-on-document-vs-id-selector - kendaleiv

@kendaleiv，这只是检查绑定速度的方法。由于文档是现有元素，因此速度更快，而#container必须先定位。然而，真正的问题在于绑定到文档意味着事件需要一直冒泡到顶部元素才能被处理。 - Gabriele Petrioli

除了Gaby所说的之外，如果您将许多事件绑定到document，那么每次事件发生并冒泡到document对象时，该事件都必须与绑定到document的每个选择器进行比较。由于某些选择器比较相当缓慢（取决于选择器的复杂性），因此这可能会变得非常缓慢。尽可能靠近实际对象进行绑定，可以使每次比较的事件处理程序/选择器列表变短，而不是长列表。在更大的页面中速度要快得多。他们没有为了好玩而摆脱.live()。 - jfriend00

@Gaby aka G. Petrioli：嗯，也许这不是一个公平/好的测试。使用$(document)与更窄的选择器（可能具有不同大小的DOM）之间的差异有多大可能很有趣。 - kendaleiv