0

我有两个 div，一个在另一个里面：

<div id="parent">
    <div id="children">
        Click me
    </div>
</div>

​</p>

当我使用 jquery 单击子 div 时，父级也被单击。

$(function() {
   $("div").click(function(){
       alert("The id of the selected item is: " + $(this).attr("id"));
   });
});​

我能做些什么来避免这种情况？这是我的 jsfiddle：http: //jsfiddle.net/gzpPB/1/

4

4 回答 4

2

在您的选择器中更具体：

$("#children") instead of $("div")
于 2012-11-09T21:19:20.327 回答
2

最强大的解决方案是简单地给所有点击接受的 DIV 元素一个特定的类。这样，无论它们嵌套在何处或嵌套多深，都只会触发具有“按钮”类的元素。

新代码：

<div id="parent">
    <div id="children" class="button">
        Click me
    </div>
</div>


$(function() {
   $(".button").click(function(){
       alert("The id of the selected item is: " + $(this).attr("id"));
   });
});​

如果您使用的是 jQuery 1.8 或更高版本，则需要这样做：

$(function() {
       $(document).on('click', ".button", function(){
           alert("The id of the selected item is: " + $(this).attr("id"));
       });
    });​
于 2012-11-09T22:16:50.330 回答
0

因为您只是针对页面上的 div 元素。

用于e.target定位特定的 div。还e.stopPropagation()

$(function() {
       $("div").click(function(e){
           if( e.target.id == 'children'){
               e.stopPropagation();
               alert("The id of the selected item is: " + $(this).attr("id"));
           }
        });
    });

检查小提琴

于 2012-11-09T21:19:40.607 回答
0

像这样使用.stopPropagation()：

$(function() {
   $("div").click(function(e){
       e.stopPropagation();
       alert("The id of the selected item is: " + $(this).attr("id"));
   });
});​

jsFiddle 示例

由于冒泡，当您单击子 div 时，您的代码会为两个 div 发出警报。对子项的单击会到达父项，然后再次触发 laert，因为您的 jQuery 是针对所有 div，而不是特定 div。您只能使用$("#children"). 但是，您也可以停止冒泡stopPropagation()，当您单击任何 div 而不仅仅是特定的 div 时，这将使您的警报起作用。

于 2012-11-09T21:20:37.167 回答