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


jQuery .on does not work but .live does

由于从1.7版开始不推荐使用live()方法，因此我开始浏览源代码并将所有活动事件处理程序都转换为on()。 我的印象是，更改将非常简单，并且一切将像以前一样工作。 但是，我遇到了一些行为不正常的代码。

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

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

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

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

那么在页面上发生任何异步回发后，将不再引发click事件。 请注意-click事件确实适用于所有异步回发，但之后将不再起作用。 那我在这里想念什么？

相关讨论

这样的问题已经回答了很多次，因为人们不太了解.on()的动态版本是如何工作的，这似乎很普遍。您正在使用静态形式的.on()，当您可能打算使用动态形式的.on()时，在调用.on()时对象必须存在，如下所示：

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

将.live()替换为.on()是因为.on()通过指定动态对象的静态父对象来将事件处理程序附加到该对象，从而使您具有更好的性能，这比将其附加到document对象的效率更高。 .live()做了什么。我建议您阅读以前的答案(全部由我撰写)，以了解有关如何最好地使用.on()的更多信息。这些答案还包括有关使用.on()的最有效方法的评论以及其工作方式的简要说明：

jQuery：关于vs直播

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

jQuery的新on()方法与live()方法在性能上相比如何？

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

为什么不将Javascript事件委托发挥到极致呢？

相关讨论

相当于

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

是

1
2
3
$(document).on("click", 'table.accordion-header', function ($e) {
  // gobs of code
} );
相关讨论

最好的表达方式就像jQuery在.live()和.on()功能上所说的那样：

  • 在选择器" $(selector)"中，放入一个随页面加载的具体元素-不是动态的。
  • 然后将辅助选择器放入指示"选择器"的方法中-可以动态创建该选择器。
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    //so this..
        $('table.accordion-header').live("click", function ($e) {
      // gobs of code
    });

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

    假设"表"当然已加载页面。

    我也尝试将live()更新为on()遇到了麻烦，但是当有人向我展示了第一个父项或上下文选择器的工作原理时，我终于明白了。关键是确保第一个元素在文档对象模型中。

    $(this)与.on()的工作方式也不明显。

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

    在上面的示例中，函数代码中的$(this)将引用$('table.accordion-header')而不是您期望的$(document)。

    进一步说明：.on()和$(this)

    在jQuery 1.7.2源代码中，"实时"几乎指向"打开"，因此此问题可能与"打开"功能无关。这需要排除。 on的选择器可能是个问题。

    jQuery来源：

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

    相关讨论