jQuery .on不起作用但.live确实如此

Question

由于live()方法从版本1.7开始不推荐使用,因此我开始浏览我的源代码并将所有实时事件处理程序转换为on().我的印象是,改变很简单,一切都会像以前一样有效; 但是,我遇到了一些行为不正常的代码.

我有以下jQuery选择绑定表标记的click事件...

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

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

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

然后,在页面上发生任何异步回发后,不再引发click事件.请注意 - click事件确实可以处理任何异步回发,但之后它不再有效.那我在这里错过了什么？

Answer 1

像这样的问题已被回答很多次,因为人们似乎不太了解动态版本的.on()工作方式.当您打算使用动态形式时,您正在使用.on()对象必须存在的静态形式:.on().on()

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

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

jquery:on vs live

jQuery.on()是否适用于在创建事件处理程序后添加的元素？

jQuery的新on()方法如何与性能中的live()方法进行比较？

jQuery.bind()和jQuery.on()之间有什么区别？

为什么不把Javascript事件委托带到极致？

Answer 2

相当于

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

是

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