jQuery .on ('click' ) 与 .click() 和 .delegate ('click' )

Question

我习惯使用.click()和delegate('click') ，所以当我读到这两个在 jQuery 的最新版本中都被弃用时，我想我应该读一下它，但我有点摸不着头脑。

文档 here似乎表明这是 .live() 的直接替代品和 .delegate() ，但是.click()和 .bind()有不同的行为，即绑定(bind)到当前存在的对象，而其他对象则绑定(bind)到在整个 DOM 生命周期内与选择器模式匹配的任何对象。

在大多数情况下，这不会产生很大的区别，但是当动态向 DOM 添加元素时，这是一个重要的区别。与旧模式匹配的新对象不会将监听器绑定(bind)到 click事件使用 .click() ，但是会 .delegate() .

我的问题是，如何使用 .on()复制预先存在的行为的方法 .delegate()和.bind() ？还是 future 的一切都朝着.delegate()方向发展？风格？

Answer 1

这两种模式仍然受支持。

以下对 bind() 的调用:

$(".foo").bind("click", function() {
    // ...
});

可以直接转换为如下对on()的调用:

$(".foo").on("click", function() {
    // ...
});

以及以下对 delegate() 的调用:

$("#ancestor").delegate(".foo", "click", function() {
    // ...
});

可以转换为以下对on()的调用:

$("#ancestor").on("click", ".foo", function() {
    // ...
});

为了完整起见，以下是对 live() 的调用:

$(".foo").live("click", function() {
    // ...
});

可以转换为以下对on()的调用:

$(document).on("click", ".foo", function() {
    // ...
});

<小时/>

更新:

除了 on 事件外，其余事件在不同的 jQuery 版本中均已弃用。

• bind - 已弃用版本:3.0
• live - 已弃用版本:1.7，已删除:1.9
• 委托(delegate) - 已弃用版本:3.0