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事件。请注意 - 点击事件可以处理任何异步回发，但之后不再有效。那我在这里错过了什么？

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

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?

Answer 2

相当于

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

是

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

Answer 3

在jQuery 1.7.2源代码中，“live”几乎指向“on”，因此这个问题可能与“on”函数无关。这需要排除。打开选择器可能是一个问题。

jQuery来源：

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

Answer 4

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

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

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

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

此处有进一步说明：.on() with $(this)

Answer 5

最好的方式我可以这样说就像.live() .on()和//so this.. $('table.accordion-header').live("click", function ($e) { // gobs of code }); //becomes this.. $('table').on("click",'.accordion-header', function ($e) { // gobs of code });功能上的文档所说的那样：

在您的选择器＆＃34; $（选择器）＆＃34;抛出一个随页面加载的具体元素 - 不是动态的。
然后将二级选择器放入＆＃34;选择器＆＃34;表示 - 这个可以动态创建。

const results = files.map(f => require(f));

假设＆＃34; table＆＃34;当然是加载了页面。

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

5 个答案: