Question

由于您致电$('mySelector').on('myEvent', 'mySecondSelector'),我不明白使用"mySecondSelector"？

Answer 1

第二个选择器是目标。在运行时代码可能不存在目标的情况下，此语法允许使用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，请运行处理程序，否则不要执行任何操作

Answer 2

如果您有一个包含多个子元素的元素，如果您未指定第二个选择器，则无论您单击哪个子元素，都将触发该事件。如果您指定它，则仅当您使用该选择器单击所选元素时才会启动该事件。

例如，您可能有：

<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'的那个）时，事件才会启动。

Answer 3

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

要回答你的问题，我首先要解释为什么要添加这个问题。之前有（{仍然是你被描述的）方法，如.live()，它会不断监视DOM以寻找与选择器匹配的元素。因此，对于每个DOM更改（无论是插入，重新排列，删除等），侦听器都将处于活动状态并尝试查看附加委托所需的内容。

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

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

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

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

广泛使用，许多人使用`.on（）'喜欢

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

这通常没问题，因为DOM通常不是很大。但是，它的作用是：它告诉jQuery在DOM中查看body元素并查找其中的所有#mydiv元素。当你操纵1000个子元素时，与旧方法没有什么不同。

因此，在使用.on()时，请尝试使第一个选择器成为包含第二个选择器元素的选择器，而不是更多的DOM。

Answer 4

$('mySelector').on('myEvent', 'mySecondSelector')

mySecondSelector ：

一个选择器字符串，用于过滤将调用处理程序的所选元素的后代。如果选择器为null或省略，则处理程序在到达所选元素时始终被调用。

有关详细信息，请参阅 On()