0

我对使用 .on() 有点困惑有人可以告诉我两者之间的区别：

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

和

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

4 回答 4

3

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

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

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

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

这是一个简单的演示。对于以下标记：

<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>");

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

于 2012-08-08T09:05:02.840 回答
1

第一个是动态创建的元素 ( .select-topic)
，第二个不会将 click enent 侦听器委托给新创建的元素。

第一个类似于现在已弃用的.live()方法。

于 2012-08-08T09:04:55.380 回答
0 
$('#detailData')
.on('click', '.select-topic', function () {

将 click 事件处理程序与#detailData.

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

将 click 事件处理程序与#detailData .select-topic

于 2012-08-08T09:05:56.717 回答
0

该文档可以向您解释：

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

selector一个选择器字符串，用于过滤触发事件的选定元素的后代。如果选择器被null或省略，事件总是在到达被选元素时触发。

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

有关事件委托的更多信息：http: //davidwalsh.name/event-delegate

于 2012-08-08T09:05:59.997 回答