$(document).on('click', '#id', function() {}) 与 $('#id').on('click', function(){}) 的区别

Question

我试图找出两者之间的区别是什么。

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

和

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

我找不到任何关于这两者是否有任何区别，如果有的话是什么区别的信息。

请问有人能解释一下是否有任何区别吗？

- Styphon

---

你有没有阅读文档或在这个网站上搜索？应该有几百万个答案可供选择。 - adeneo

尽管文档中清楚地记录了内容，你会得到“贪心”的河马回答。第一段代码表示：“当单击文档时，如果是具有 #id ID 的元素，则触发此代码”。第二个代码表示：“当当前存在具有 #id ID 的任何元素被点击时，触发此代码”。第一个代码用于将事件分配给在该时间不存在但以后会存在的元素。第二个代码不会对稍后添加的任何元素触发。 - Reinstate Monica Cellio

我确实做了这两件事，但显然没有彻底地做好。搜索很困难，因为我不知道该搜索什么。我不知道这被叫做什么。 - Styphon

这在on()的文档中有解释。只需要读一些文档 :) - Reinstate Monica Cellio

如果这个问题因为不够具有建设性或者已经有相应的文档而被关闭，那么 Stack Overflow 大约 99.9% 的问题都应该关掉，如果是这样的话，祝你好运找到剩下的 0.1%，因为 Stack Overflow 可能会倒闭。同样的道理也适用于带有贬义的“追分怪”评论。 - cesoid

Answer 1

第一个示例演示了“事件委托”。事件处理程序绑定到DOM树中更高层的元素（在本例中为document），当事件从与选择器匹配的元素发起并到达该元素时，将执行它。

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

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

通过委托事件处理程序，您可以确保为在绑定时不存在于DOM中的元素执行它。如果您的#id元素是在第二个示例之后创建的，则您的处理程序永远不会执行。通过绑定到您知道在执行时肯定存在于DOM中的元素，您确保您的处理程序实际上已附加到某个内容并可以在适当的时候执行。

- James Allardice

---

我想知道哪个委托事件更快。我想提高我的jQuery代码质量。由于从DOM委托事件需要比从#Element委托事件花费更多的时间。请分享你的想法。 - Arun G

@James Allardice - дҪҝз”ЁеҗҺдёҖз§Қж–№жі• $(document).on('click', $('#id'), function()...)пјҢжҲ‘иҜҘеҰӮдҪ•дҪҝз”Ё $(this) жқҘеј•з”Ё $('#id')пјҹзӣ®еүҚ $(this) жӯЈеңЁеј•з”Ё document - жҲ‘зҗҶи§ЈиҝҷдёҖзӮ№гҖӮ - cheshireoctopus

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 ，新项目将无需额外的努力即可工作。下面是 .on 版本的代码：

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

摘要：

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

- Bhushan Firake

---

Bhushan，使用前者而不是后者有什么原因吗？ - Sean Magyar

@SzilardMagyar 我想我已经在我的回答摘要部分回答了这个问题。 - Bhushan Firake

好的信息！ - Abdul Aziz Al Basyir