Question

我通常使用

$(selector).click(...

但有些人建议我改用它：

$(selector).on("click", function(...

或$(selector).live("click"...（已弃用）

我阅读了手册，但是我的初学者的想法无法理解。我对他们使用的所有术语感到困惑。我仍然不知道使用.on()的区别和原因
http://api.jquery.com/on/

Answer 1

在一天结束时，每个事件都绑定到DOM中的某些元素。在.bind的情况下，您将直接绑定到jQuery对象中的元素（或元素）。例如，如果您的jQuery对象包含100个元素，那么您将绑定100个事件侦听器。

对于.live，.delegate和.on，单个事件侦听器绑定，通常位于DOM中最顶层的节点之一树：document，document.documentElement（<html>元素）或document.body。由于DOM事件在树中冒泡，因此附加到body元素的事件处理程序实际上可以接收源自页面上任何元素的单击事件。因此，不是绑定100个事件，而是只绑定一个。

对于少量元素（比如少于5个），直接绑定事件处理程序可能会更快（尽管性能不太可能成为问题）。对于大量元素，请始终使用.on。

.on的另一个优点是，如果向DOM添加元素，则不必担心将事件处理程序绑定到这些新元素。以一个HTML列表为例：

<ul id="todo">
  <li>buy milk</li>
  <li>arrange haircut</li>
  <li>pay credit card bill</li>
</ul>

接下来，一些jQuery：

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

现在，如果我们添加一个待办事项怎么办？

$('#todo').append('<li>answer all the questions on SO</li>')

单击此待办事项项不会将其从列表中删除，因为它没有绑定任何事件处理程序。如果我们使用.on，那么新项目将无需任何额外的努力即可使用。以下是.on版本的外观：

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

Answer 2

在普通.click(...中，如果选择器的目标即时更改（例如通过某些ajax响应），那么您需要再次分配行为。

在.live(...上，行为将自动在选择器上重新应用。

.on(...是非常新的（jQuery 1.7），它可以使用委托事件覆盖live场景，这是一种更快的附加行为的方式。

Answer 3

唯一的区别是.click()将应用于DOM中存在的具有该特定选择器的元素（仅已经存在的元素）。
另一方面，.on(selector ,"click",callback);将应用于与该选择器匹配的所有元素即使在将来，让我举个例子：

$('p').click(function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

如果单击“这是前一段的副本”（新的段落）的段落，则不会得到您想要的结果，即在单击的段落旁边添加段落，因为它是一开始不在那里

但是如果你使用

$('p').on("click",function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

你会得到你想要的东西（因为.on或.delegate找到了匹配，即使是新的匹配）

jQuery：.click（）和.on（“click”）之间的区别

3 个答案: