jQuery .on 不起作用，但 .live 起作用

Question

由于 live() 方法从版本 1.7 开始已被弃用，因此我开始检查源代码并将所有实时事件处理程序转换为 on()。我的印象是，改变会很简单，一切都会像以前一样进行。但是，我遇到了一些行为不正常的代码。

我有以下 jQuery 选择来绑定(bind)表标签的单击事件...

$('table.accordion-header').live("click", function ($e) {
  // gobs of code
}

...并且它工作得很好(即 ​​- 即使页面上发生异步回发，我的表标记单击事件也会引发)。但是如果我将代码更改为以下内容

$('table.accordion-header').on("click", function ($e) {
  // gobs of code
}

那么在页面上发生任何异步回发后，不再引发单击事件。请注意 - 点击事件确实适用于任何异步回发，但之后它不再起作用。那么我在这里缺少什么？

Answer 1

这样的问题已经被回答了很多很多次，因为人们不太了解 .on() 的动态版本是如何工作的，这似乎是相当常见的。您正在使用 .on() 的静态形式，其中当您可能打算使用 .on() 的动态形式时，该对象必须在您调用 .on() 时存在.on() 像这样:

$(someStaticParentObject).on("click", 'table.accordion-header', function ($e) {
  // code
}

.live() 已替换为 .on()，因为 .on() 允许您通过指定静态来获得更好的性能将事件处理程序附加到的动态对象的父对象比将其附加到 document 对象更有效，这就是 .live() 所做的。我建议您阅读之前的这些答案(全部由我编写)，以了解有关如何最好地使用 .on() 的更多信息。这些答案还包括有关使用 .on() 的最有效方法的评论以及其工作原理的简要说明:

jquery: on vs live

Does jQuery.on() work for elements that are added after the event handler is created?

How does jQuery's new on() method compare to the live() method in performance?

What's the difference between jQuery.bind() and jQuery.on()?

Why not take Javascript event delegation to the extreme?