$(document).on('click', '#id', function() {}) 与 $('#id').on('click', function(){}) [关闭]答案

【问题标题】：$(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){}) [closed]$(document).on('click', '#id', function() {}) 与 $('#id').on('click', function(){}) [关闭]
【发布时间】：2013-01-30 12:16:05
【问题描述】：

我试图找出两者之间的区别

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

和

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

我无法找到任何信息来说明两者之间是否存在任何差异，如果存在差异可能是什么。

有人可以解释一下是否有任何区别吗？

【问题讨论】：

您是否阅读过文档或在此站点上进行过搜索。应该有几百万个答案可供选择？
你会得到“点饿”河马回答这个问题，尽管它有明确的记录。第一个代码说“当单击文档时，如果它是 ID 为 #id 的东西，则触发此代码”。第二个说“当单击当前存在的 ID 为 #id 的任何内容时，触发此代码”。第一个用于将事件分配给当时不存在但将来会存在的元素。第二个不会为以后添加的任何元素触发。
我都做了，但显然不够彻底。搜索很困难，因为我不知道要搜索什么。我不知道这叫什么。
on() 的文档中对此进行了解释。只需阅读大量内容即可:)
如果这应该被关闭为不具建设性或因为它存在文档，那么大约 99.9% 的 stackoverflow 问题应该被关闭，在这种情况下，祝你好运找到剩余的 0.1%，因为它可能会消失的业务。贬义的“点饿河马”言论也是如此。

标签： jquery syntax

【解决方案1】：

第一个例子演示了事件委托。事件处理程序绑定到 DOM 树更高的元素（在本例中为 document），并且当事件到达该元素时执行，该元素源自与选择器匹配的元素。

这是可能的，因为大多数 DOM 事件冒泡从源点向上树。如果您单击#id 元素，则会生成一个单击事件，该事件将通过所有祖先元素冒泡（旁注：在此之前实际上有一个阶段，称为“捕获阶段”，当事件发生时）从树下到目标）。您可以在这些祖先中的任何一个上捕获事件。

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

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

【讨论】：

我想知道哪个代表事件更快。我想提高我的 jquery 代码的质量。由于来自 DOM 的委派事件比来自 #Element 的委派事件需要一点时间。请分享您的想法
@James Allardice - 使用后一种方法，$(document).on('click', $('#id'), function()... 我如何使用$(this) 引用$('#id')？ $(this)当前引用 document - 我理解。

【解决方案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，则新项目将无需我们付出任何额外努力即可工作。以下是 .on 版本的外观：

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

总结：

.on() 和 .click() 之间的区别在于，当与 .click() 事件关联的 DOM 元素在稍后动态添加时，.click() 可能无法工作，而.on() 可以在以下情况下使用与 .on() 调用关联的 DOM 元素可能会在以后动态生成。

【讨论】：

Bhushan，有什么理由使用前者而不是后者？
@SzilardMagyar 我想我已经在答案的摘要部分回答了这个问题。
好资料！