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

由于live（）方法从版本1.7开始已经被弃用，我开始浏览我的源代码并将所有现场事件处理程序转换为on（）。 我的印象是这种变化很简单，一切都会像以前一样工作。 然而，我遇到了一些代码，它不应该如此。

我有以下的jQueryselect绑定表标签的点击事件…

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

…它工作得很好（即 ​​- 我的表标记点击事件即使在页面上发生asynchronous回发后引发）。 但是，如果我将代码更改为以下

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

那么在页面上发生任何asynchronous回发之后，不再引发click事件。 请注意 – 点击事件可以处理任何asynchronous回发， 但事后不再有效 。 那么我在这里错过了什么？

Answer 1

相当于

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

是

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

Answer 2

像这样的问题已经被很多次的回答了，因为人们不太了解.on()的dynamic版本是如何工作的。 当您打算使用.on()的dynamicforms时，您在调用.on()时必须存在对象的.on()的静态forms。

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

.live()被replace为.on()因为.on()允许您通过指定dynamic对象的静态父对象来附加事件处理程序，从而更有效地将其附加到document对象是.live()做的。 我build议你阅读以前的答案（全部由我写），以更好地了解如何最好地使用.on() 。 这些答案还包括有关使用.on()的最有效方式的注释以及它如何工作的简要说明：

jquery：关于vs live

jQuery.on（）是否适用于在创build事件处理程序之后添加的元素？

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

jQuery.bind（）和jQuery.on（）有什么区别？

为什么不把JavaScript事件委托给极端？

Answer 3

在jQuery 1.7.2源文件中，“live”几乎指向“on”，所以这个问题可能与“on”函数无关。 这需要排除。 select器可能是一个问题。

jQuery源码：

 live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, 

Answer 4

我尝试更新我的live（）到on（）也遇到了麻烦，但是最终在有人向我展示了第一个父代或上下文select器如何工作时得到了它。 关键是确保第一个元素在文档对象模型中。

$（this）与.on（）一起使用的方式也不明显。

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

在上面给出的例子中，函数代码中的$（this）将引用$（'table.accordion-header'）而不是$（document），正如您所期望的那样。

进一步的解释在这里： .on（）with $（this）

Answer 5

最好的方法，我可以把这个就像文档从jQuery上.live()和.on()function：

1. 在你的select器“$（selector）”中引入一个加载页面的具体元素 – 不是dynamic的。
2. 然后将第二个select器放入指定“select器”的方法中 – 这个可以dynamic创build。

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

假设“表”是当然加载的页面。