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回发, 但事后不再有效 。 那么我在这里错过了什么?

5 Solutions collect form web for “jQuery .on不起作用,但.live却行”

相当于

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

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

像这样的问题已经被很多次的回答了,因为人们不太了解.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事件委托给极端?

在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; }, 

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

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

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

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

进一步的解释在这里: .on()with $(this)

最好的方法,我可以把这个就像文档从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 }); 

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

  • 用jquery查找div底部的位置
  • AJAX与JavaScript和jQuery有什么区别?
  • 我想了解jQuery插件语法
  • 将一个Deferreds数组传递给$ .when()
  • error handling与.post()
  • jQuery的ui可拖动的元素不是“可拖动”的滚动div之外
  • jQuery - keydown / keypress / keyup ENTERKEY检测?
  • 重置select2值并显示占位符
  • 通过JQuery AJAX一起发送FormData和String数据?
  • 禁用使用jQuery的超链接
  • scrollIntoView是否可以在所有浏览器中使用?