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

Question

我习惯使用.click()和delegate('click'),所以当我读到两个都在最近的jQuery版本中被弃用时,我以为我已经阅读了它,但我有点不知所措.

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

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

我的问题是,如何使用该.on()方法复制预先存在的.delegate()和.bind()？的行为？或者未来的一切都会走向.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() {
    // ...
});

Answer 2

该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方法永远不会。