Question

我对使用.on（）感到有点困惑。有人可以告诉我区别：

$('#detailData').on('click', '.select-topic', function() {

和

$('#detailData .select-topic').on('click', function() {

Answer 1

第一个委派点击事件处理程序到#detailData元素。当click事件（可能来自其任何后代）到达该元素时，jQuery会检查事件目标是否与选择器.select-topic匹配。如果是，则执行事件处理程序。

如果动态地将.select-topic元素添加到DOM，这很有用 - 您无法将事件处理程序直接绑定到尚不存在的元素。

这是可能的，因为大多数DOM事件从它们所源自的元素向上冒泡，直到所有祖先元素。

第二个示例将click事件处理程序绑定到执行代码时DOM中存在的所有.select-topic元素。

这是一个simple demonstration。对于以下标记：

<ul id="myList">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
</ul>

运行以下代码：

$("#myList .item").on("click", function () {
    $(this).text("Clicked!"); 
});

/*$("#myList").on("click", ".item", function () {
    $(this).text("Clicked!"); 
});*/

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

尝试点击“第3项”，什么都不会发生。注释掉第一个.on()电话，并取消注释第二个电话。再次运行它，并注意当您单击“Item 3”时，事件处理程序现在如何运行。

Answer 2

第一个用于动态创建的元素（.select-topic）
second 不会将click enent侦听器委托给新创建的元素。

第一个就像现在已弃用的.live()方法一样。

Answer 3

$('#detailData')
.on('click', '.select-topic', function () {

将点击事件处理程序与#detailData绑定。

$('#detailData .select-topic')
.on('click', function () {

使用#detailData .select-topic

绑定点击事件处理程序

Answer 4

The documentation可以向您解释：

<强> .on( events [, selector] [, data], handler(eventObject) )

selector 一个选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器为null或省略，则事件始终在到达所选元素时触发。

换句话说，在这两种情况下，事件都附加到ID为detailData的元素，但在第一种情况下，它被委托给匹配'.select-topic'选择器的所有元素。这将起作用，即使'.select-topic'在定义时不匹配（因为您没有将事件附加到该元素，只附加父元素）。

有关活动委派的更多信息：http://davidwalsh.name/event-delegate

使用.on（）和jQuery的不同方法？

4 个答案: