0

既然你打电话$('mySelector').on('myEvent', 'mySecondSelector'),我不明白使用"mySecondSelector"？

4

4 回答 4

4

第二个选择器是目标。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，则运行处理程序，否则不执行任何操作

于 2012-11-24T14:20:08.893 回答
1

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

例如，您可能有：

<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 时触发（具有 'fireEvent' 的 id 的那些。

于 2012-11-24T14:23:03.553 回答
1

在 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 观察bodyDOM 中的元素并查找其中的所有#mydiv元素。当您有 1000 个子元素被操作时，与旧方法没有太大区别。

因此，使用时.on()请尽量使第一个选择器包含第二个选择器元素，而不是进一步向上 DOM。

于 2012-11-24T14:29:35.553 回答
0 
$('mySelector').on('myEvent', 'mySecondSelector')

我的第二选择器：

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

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

于 2012-11-24T14:16:13.467 回答