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

我通常使用

$(selector).click(...

但有些人建议我改用这个：

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

或

$（选择器）.live（“单击”…

（已弃用）

我读了手册，但我的乞丐的头脑无法理解。我对他们使用的所有术语感到困惑。我仍然不知道区别，也不知道为什么要使用

.on（）

在普通的

中。单击（…

如果选择器的目标在运行中发生更改（例如通过一些ajax响应），则需要再次分配行为

在

.live（…

上，将自动在选择器上重新应用该行为

---

（…上的

.on是非常新的（jQuery 1.7），它可以使用委派事件来覆盖
实时
场景，这是附加行为的一种更快的方式。
在一天结束时，每个事件都绑定到DOM中的某个元素。在
.bind
的情况下，您直接绑定到元素（或多个元素）例如，如果jQuery对象包含100个元素，则将绑定100个事件侦听器

在
.live
、
.delegate
和
.on
的情况下，单个事件侦听器被绑定，通常位于DOM树中最顶端的节点之一：
document
、
document.documentElement
（
元素），或
document.body
。由于DOM事件在树中冒泡出现，因此连接到
body
元素的事件处理程序实际上可以接收来自页面上任何元素的单击事件。因此，与其绑定100个事件，不如只绑定一个

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

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

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

现在，如果我们添加一个待办事项呢

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

唯一的区别是，
.click（）
将应用于具有特定选择器的DOM中存在的元素（仅已经存在的元素）。

另一方面，
.on（选择器，“单击”，回调）；
将应用于与该选择器匹配的所有元素
即使在未来,，
让我举一个例子：

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

$（'p'）。单击（函数（）{
$（这个）。下一个（“这是上一段的副本”
）；
});

如果你点击上面写着“这是上一个段落的副本”（新段落）的段落，你不会得到你想要的结果，即在点击的段落旁边添加一个段落，因为它不在开头

但是如果你使用

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

$（'p'）。在（“单击”，函数（）上）{
$（这个）。下一个（“这是上一段的副本”
）；
});

你会得到你想要的（因为
.on
或
.delegate
找到与新内容相匹配的内容）
所以…如果我克隆一个元素，或者使用ajax动态创建内容，如果我使用。click（）对新内容不起作用，但是。on（“click”）会起作用吗？我想这叫做绑定方法/事件？也是
。on（）
可用于使用映射同时附加多个事件。@Omar：是的，假设您正确获得了委派。例如，如果您在表中谈论trs，则需要执行
$（“#myTable”）。在（“单击”，“tr”，…
。看一看@pedram behroozi我甚至不知道jQuery地图是什么…它使用GPS？：p.Aaaaa…如何使用地图同时附加多个事件？@cherouvim我读了api.jQuery.com/on…但正如我解释的，我是一个初学者，不理解他们使用的所有术语。我更困惑了：-（你为什么要使用$（event.target）.remove（）；而不是$（this）.remove（）；？此外，我在JSFIDLE中尝试了它，但无法使其工作：-（@Omar关于
event.target
的观点很好。在我写这篇文章的时候，我不确定
this
在传递给
的事件处理程序中的绑定。在
上。刚刚阅读了该方法的文档之后，我现在意识到
this
和
event.type
在这种情况下将引用相同的对象（但不要在所有情况下都这么做）。@Omar
上的
.on方法是在刚刚发布的jQuery 1.7中添加的。你的提琴使用的是jQuery 1.6.4。@davidchambers噢！我修复了提琴。谢谢你指出它。它还活着！！！顺便说一句，你的示例很棒，但它缺少了一个分号！”在每行末尾。使用click（）方法对children“$（'#todo'）.children（）进行一点观察使用上述函数将删除子对象本身。因此，没有子对象=没有事件的对象。另一方面，使用#todo上的.On方法不会删除#todo对象，而是针对所有“li元素”…我认为这是应该指出的点。.On click方法可以将元素作为参数从docs:“从jQuery 1.7开始，.on（）方法提供附加事件处理程序所需的所有功能。有关旧jQuery事件方法的等效项，请参阅.bind（）、.delegate（）和.live（）
$('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>');
});