on() 方法不能作为 live()答案

【问题标题】：on() method does not work as live()on() 方法不能作为 live()
【发布时间】：2012-03-28 17:41:25
【问题描述】：

我将一些方法从 $(selector).live('click', function(){}); 更改为 $(selector).on('click', function(){}); 。

起初它似乎完全一样。但是当我在 DOM 上插入新的 html 时，使用相同的选择器插入的新元素，它们不会被 $(selector).on('click', function(){}); 捕获并且在它们被 live() 方法捕获之前。

为什么？我错过了什么？

【问题讨论】：

【解决方案1】：

.on 与.live 相比采用不同的参数集。你不能只用另一个替换一个~~（$(selector).on.live 没有意义）~~。

正确的语法是：

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

这将绑定到所有匹配 selector 的元素，无论它们何时添加到 DOM。

注意：

除了document，您可以使用元素的父级，只要该父级保留在 DOM 中。

例如：

<div id="myDiv">
    <p>Hello World</p>
    <p>Hello World</p>
</div>

那么你可以这样做：

$('#myDiv').on('click', 'p', function(){});

对于添加到#myDiv 的所有<p> 标记都会触发该点击事件。

注意：

$(selector).on('click', function(){})

和做的一样

$(selector).bind('click', function(){})

（jQuery 1.7.1 建议使用.on 而不是.bind）

【讨论】：

将其附加到文档可能会适得其反，不是吗？任何不会改变的元素都会阻止事件冒泡到顶部？还是我弄错了？
@mdi：您可以将事件附加到所需元素的任何父级，只要该父级保留在 DOM 中。我不太确定冒泡如何处理委托事件。
@mdi：事件冒泡到调用on 的元素（然后运行委托事件），然后继续到document。 jsfiddle.net/GdjPT/1
@Rocket 对不起，我没有写对。它只是 $(selector).on('click', function(){});但是阅读您的答案，我意识到选择器应该位于第二个参数处。我会试试的。
@elranu：将选择器作为第二个参数添加到.on，使事件“活动”；没有它，就像在做.bind。