问jQuery .on()中第二个选择器的作用是什么？

EN

第二个选择器是目标。此语法允许在运行代码时目标可能不存在的情况下使用on()作为委托方法

假设这个标记

<ul id="list">
    <li class="item">Item</li>
</ul>

您可以向item类添加一个单击处理程序：

$('.item').on('click',doSomething);

但是如果我们现在向列表中添加一个新项目

$('#list').append(' <li class="item">Item</li>');

在调用单击处理程序时此新项不存在，因此不会将事件处理程序绑定到它

相反，我们使用主ul或任何其他直到document级别的永久祖先，因为它始终存在并以项为目标

$('#list').on('click', '.item', doSomething);

解释为:如果单击#list**，的目标是** .item**，运行处理程序，则When click on handler，否则不执行任何操作**

如果你有一个包含多个子元素的元素，如果你不指定第二个选择器，那么无论你点击哪个子元素，事件都会被触发。如果您指定了它，则只有当您使用该选择器单击所选元素时，事件才会触发。

例如，您可能具有：

<div id="clickable">
    <div id="fireEvent">Example</div>
    <div id="dontFireEvent">Example</div>
    <div id="fireEvent"></div>
</div>

现在，如果您调用$('#clickable').on('myEvent');，则无论您在该区域的哪个位置单击，事件都会被触发。

但是如果你调用，$('#clickable').on('myEvent','#fireEvent');只有当你点击第一个和第三个div ( id为'fireEvent‘的那两个)时，事件才会被触发。

在jQuery 1.7x中添加了.on()方法。

为了回答你的问题，我需要首先解释为什么要添加这个。早些时候有(现在仍然有)像.live()这样的方法，它会不断地监视DOM中与选择器匹配的元素。因此，在每次DOM更改(无论是插入、重新排列、删除等)时，侦听器都将处于活动状态，并尝试查看它需要附加委托的内容。

想象一下，一个包含一个容器和1000个子元素的页面。现在，子元素不断变化(主要是由于Ajax)，您需要将.click()事件绑定到每个子元素。这在过去消耗了大量的处理并且具有相当差的性能。

输入.on()方法。基本上，这两个选择器用于：

第一个选择器-加载DOM后不应更改的parent元素

第二个选择器- child元素，它是您正在编写的方法的实际目标，即使在加载DOM之后，它也可能来自第一个选择器。

为了广泛使用，许多人使用`.on()‘like

$(body).on("click", "#mydiv", function(){
    // do something
});

这通常是可以的，因为DOM通常不是很大。但是，这样做的目的是:它告诉jQuery查看DOM中的body元素，并查找其中的所有#mydiv元素。当你有1000个子元素被操作时，与旧的方法没有太大的区别。

因此，当使用.on()时，请尝试将第一个选择器设置为包含第二个选择器元素的选择器，并且不在DOM的上方。