17

我习惯使用.click()and delegate('click')，所以当我读到这两个都在最新版本的 jQuery 中被弃用时，我以为我已经阅读了它，但我有点摸不着头脑。

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

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

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

4

4 回答 4

41

仍然支持这两种模式。

以下调用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() {
    // ...
});

更新：

除了onevent，其余的事件在不同的 jQuery 版本中被弃用。

  • bind- 不推荐使用的版本：3.0
  • live- 不推荐使用的版本：1.7，删除：1.9
  • delegate- 不推荐使用的版本：3.0
于 2012-07-02T15:26:25.927 回答
5

该on方法可以替换两者bind，delegate具体取决于它的使用方式（也click可以bind替换它）：

.click(handler) == .on('click', handler)

.bind('click', handler) ==  .on('click', handler)

.delegate('click', '#id', handler) == .on('click', '#id', handler)

click,delegate或bind方法都没有进入已弃用的页面。我怀疑这种click方法永远不会。

于 2012-07-02T15:27:40.350 回答
2

您可以从源代码中推断出别名的用法。

console.log($.fn.delegate);
function (a, b, c, d) {
    return this.on(b, a, c, d);
}

console.log($.fn.bind);
function (a, b, c) {
    return this.on(a, null, b, c);
}

该文档还提供了使用示例：

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+
于 2012-07-02T15:23:17.093 回答
2

.delegate()并.bind()使用on方法。也是.click()一个捷径。_.on()

于 2012-07-02T15:23:30.593 回答