如何将绑定到this的事件从jQuery .live()翻译为.on()？

Question

我正在将代码从已弃用的.live() API转换为.on()（请参见jQuery 1.7 发布说明）

我有多个自定义jQuery插件中附加到this的实时事件，例如：

this.live('click', function() {
    ...
});

jQuery .live()文档提供了一些关于如何迁移到.on()的指南：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

然而，这不起作用：

$(document).on('click', this, function() {
    ...
});

那么...我该如何使用新的on() API使绑定到this的实时事件生效？

- akavlie

---

“bind”，“delegate”和“live” 我所知并未被弃用，除非您已经找到官方通知表明它们已被弃用，在这种情况下，请引用您的来源。 - zzzzBov

关于 Live 被弃用的通知在 akavlie 链接到的 jQuery 文档中是正确的。 - Anthony Jack

zzzzBov，在这篇博客文章中，以及.live()的文档中明确指出它已经被弃用。另一方面，.bind()和.delegate()被认为是被取代而不是被弃用。看起来他们对.live()采取了更坚定的立场，因为文档中指出了它的缺点。 - akavlie

@AnthonyJack，@akavlie，非常抱歉我的疏忽，我没有注意到“live”文档的更改。我认为应该在顶部以大号粗体字提醒开发人员，而不是将其隐藏在函数签名下面。 - zzzzBov

@zzzzBov，没关系，是的，我同意应该更加突出地显示它。我只是碰巧知道这个变化即将来临，所以在文档中仔细查找了一下。 - Anthony Jack

Answer 1

试试这个:

$(document).on('click', this.selector, handler);

一个jQuery对象有一个selector属性，该属性代表用于创建该对象的选择器。

请注意，选择器会通过遍历方法进行修改，因此我会假设您的插件通常在初始DOM选择时使用。

---

为了避免使用内部属性，您可以简单地更改插件的API，要求明确传递选择器。

- RightSaidFred

---

太好了，成功了！有人应该把这个加入到jQuery文档中。 - akavlie

Answer 2

.selector属性是未记录的，当.live()方法被移除时可能会被删除。您使用.live()方法时，这段代码看起来是什么样子的？这些插件如何使用？

- Dave Methvin

---

举个例子，我有一个插件，可以为可滚动列表添加一些功能——如果它们超过一定长度，则显示箭头图形，并添加鼠标滚轮滚动等。我在这里使用了 this.live()，因为这些可以在页面加载后添加到/替换DOM中。这与任何其他地方使用 .live() 的用例相同。 - akavlie

Answer 3

自 jQuery 1.7 起，on^docs 函数被用于替代绑定事件的现有方法：

• bind^docs
• delegate^docs
• live^docs

one^docs 是一个特殊情况，请按原样使用。

现有事件仍然存在，只是别名为 on。如博客文章和live文档中所述，自 jQuery 1.7 起，live 和 die 已被弃用。

on 事件有多种格式，但函数签名如下：

.on( events [, selector] [, data], handler )

绑定：

$(selector).bind(events, data, handler);
$(selector).on(events, null, data, handler);

来源：

bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
}

Delegate:

$(selector).delegate(subselector, events, data, handler);
$(selector).on(events, subselector, data, handler);

Source:

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

现场直播：

$(selector).live(events, data, handler);
$(document).on(events, selector, data, handler);

源代码：

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

请注意，使用this.context = document;设置了this.context，如在$(document).on(...)中指定的那样。

- zzzzBov

---

这是一个关于一般转换到.on() API的很好的概述...但它并没有回答我的问题。 - akavlie

@akavlie，“现有的事件继续存在，并且只是on的别名。没有官方报告表明它们将被删除，因此，如果你更理解它们，继续使用它们是安全的。” 这句话怎么就不能回答你的问题呢？ - zzzzBov

实际上有一份官方报告表明它们将被移除：(1) “已弃用”意味着该功能不再得到批准，并且几乎总是暗示着未来的移除。 (2) jQuery博客建议在此处，目标是删除已弃用的功能; 最近再次提到了删除问题，指出这将不会发生直到2.0版本。 - akavlie

@akavlie，很高兴知道这一点，链接到一个明确表示“已弃用”的jQuery来源是我需要被说服的。我会相应地更新我的答案。 - zzzzBov

Answer 4

$(selector).on(events, data, handler)

还能正常工作。你仍然可以使用它。查看.on文档

- Madara's Ghost

---

这相当于 $(selector).bind()，而不是 $(selector).live()。 - akavlie