jQuery监听器不包括儿童

我有一个dd项目列表。每个dd项目都有一个监听器（见下文），所以如果点击它，我可以重建页面并更改一些内容。这些dd项目中的每个项目也都有一个复选框，但我希望将其从该监听器中排除（因此可以由另一个监听器接收）。jQuery监听器不包括儿童

的问题是发生是每当我点击任何地方的DD它将应用DD听众，甚至如果我点击复选框的复选框监听器。有没有一种方法可以区分出在dd中设置div并单独应用侦听器时点击了哪些内容？

示例HTML代码：

<dl> 
    <dd class="class1 class2 class3">Some text and stuff 
    <input type="checkbox" class="class1 checkBox"> 
    </dd> 
</dl>

示例jQuery代码：

$("class1.checkbox").live("click", function() { 
    //Do some other, completely different, cool stuff 
    //console.log($(this).parent().attr("id")); 
    console.log("test"); 
}); 

$("dd.class1.class2").live("click", function() { 
    //Do some cool stuff 
});

来源

2011-08-19 tgrosinger

$(":checkbox").live("click", function(e) { 
     e.stopPropagation(); 
    //Do some other, completely different, cool stuff 
    //console.log($(this).parent().attr("id")); 
    alert("test"); 
}); 

$("dd.class1.class2").live("click", function (e) { 
    e.stopPropagation(); 
    //Do some cool stuff 
    alert("test2"); 
});

http://jsfiddle.net/PsaHQ/4/

来源

2011-08-19 21:19:19 Rafay

工作完美，谢谢！ – tgrosinger

很高兴帮助！ – Rafay

你需要停止事件冒泡。

$(".class1:checkbox").click(function(e) { 
    alert('clicked checkbox'); 
    e.stopPropagation(); 
}); 

$("dd.class1.class2").click(function() { 
    alert('clicked dd'); 
});

http://api.jquery.com/event.stopPropagation/

“冒泡”的概念是一样，如果你有一个click事件的子元素，你不希望它触发父的单击事件。您可以使用event.stopPropagation()。

event.stopPropagation()基本上说只应用这个点击事件到这个儿童节点，并不告诉父容器什么，因为我不想让他们反应。

事件捕获：

   | | 
---------------| |----------------- 
| element1  | |    | 
| -----------| |-----------  | 
| |element2 \/  |  | 
| -------------------------  | 
|  Event CAPTURING   | 
-----------------------------------

事件冒泡：

   /\ 
---------------| |----------------- 
| element1  | |    | 
| -----------| |-----------  | 
| |element2 | |   |  | 
| -------------------------  | 
|  Event BUBBLING   | 
-----------------------------------

如果您正在使用live()或delegate()你需要return false;，虽然它可能无法正常工作。阅读下面的报价。

每JQuery docs：

由于.live（）方法处理事件一旦他们传播到文件的顶部，它是不可能停止的现场活动的传播。同样，由.delegate（）处理的事件将传播到它们被委派的元素;绑定在上的事件处理程序在调用委托事件处理程序之前，DOM树下面的任何元素都已执行。因此，这些处理程序可能会阻止调用event.stopPropagation（）或返回false的被委派处理程序触发。

一个很好的资源：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

来源

2011-08-19 21:17:35 AlienWebguy

我使用.live（）的唯一原因是因为HTML是所有动态事实后生成。任何其他选项呢？只是使用.click以前不工作。 – tgrosinger

停止使用'live（）'。改用'delegate（）'。它可能会或可能不会阻止传播，具体取决于您的应用程序以及绑定事件的位置。 – AlienWebguy

好吧，你有一大堆的加入了这里一个大一个小问题。

你的第一个选择器有2个问题。看看下面的更新选择（并注意大小写）：

$(".class1.checkBox").live("click", function() { 
    //Do some other, completely different, cool stuff 
    console.log("test"); 
    return false; //added. 
});

如果你想从冒泡到下一个jQuery的监听器停止的情况下，就返回false。

来源

2011-08-19 21:19:24

只需绑定click事件的DD和检查目标委托适当

$("dd.class1.class2").live("click", function (event) { 
     if($(event.target).is(":checkbox")) 
     { 
      console.log("put checkbox func here"); 
     }else{ 
      console.log("put div func here"); 
     } 
    });

工作实例： http://jsfiddle.net/QWLpd/1/

来源

2011-08-19 21:23:28

jQuery监听器不包括儿童

回答

相关问题