$（document）.on（'click'，'#id'，function（）{}）vs $（'＃id'）。on（'click'，function（）{}）

我试图找出有什么区别

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

和

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

如果两者之间有任何差异，我还找不到任何信息，如果有的话，可能会有什么不同。

有人可以解释一下，如果有什么不同？

Answer 1

第一个例子演示事件委托 。 事件处理程序绑定到DOM树（本例中为document ）上方的元素，并在事件到达源自与select器匹配的元素的元素时执行。

这是可能的，因为大多数DOM事件从起始点冒泡起来。 如果你点击了#id元素，就会产生一个点击事件，这个点击事件将会通过所有的祖先元素（ 注意：事实上有一个阶段，叫做“捕获阶段”，当事件沿着树到目标 ）。 你可以在任何一个祖先上捕捉事件。

第二个示例将事件处理程序直接绑定到元素。 事件仍然会冒泡（除非你在处理程序中阻止），但是由于处理程序绑定到了目标上，所以你不会看到这个过程的效果。

通过委派一个事件处理程序，可以确保它在绑定时在DOM中不存在的元素执行。 如果你的#id元素是在你的第二个例子之后创build的，那么你的处理器将永远不会执 通过在执行时绑定到一个你知道的元素，你可以确保你的处理程序实际上会被附加到某个东西上，并且可以在以后适当地执行。

Answer 2

考虑下面的代码

 <ul id="myTask"> <li>Coding</li> <li>Answering</li> <li>Getting Paid</li> </ul> 

现在，这里有区别

 // Remove the myTask item when clicked. $('#myTask').children().click(function () { $(this).remove() }); 

现在，如果我们再添加一个myTask呢？

 $('#myTask').append('<li>Answer this question on SO</li>'); 

点击这个myTask项目不会从列表中删除它，因为它没有绑定任何事件处理程序。 相反，如果我们使用了这个新的项目，我们不需要额外的努力。 .on版本的外观如下：

 $('#myTask').on('click', 'li', function (event) { $(event.target).remove() }); 

概要：

.on()和.on()之间的区别是.on()可能不起作用，当与.click()事件相关的DOM元素在稍后的时间点被dynamic添加时.on()可以用于与.on()调用相关的DOM元素可能会在稍后dynamic生成。