Question

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

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

当我使用jquery单击子div时，父项也被点击了。

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

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

Answer 1

在选择器中更具体：

$("#children") instead of $("div")

Answer 2

最强大的解决方案是简单地为所有接受点击的DIV元素提供特定的类。这样，无论嵌套在何处或深度，都只会触发带有“button”类的元素。

新代码：

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

Answer 3

Becoz你只是瞄准页面上的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"));
           }
        });
    });

<强> Check Fiddle

Answer 4

使用.stopPropagation()之类的：

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

<强> jsFiddle example

由于bubbling单击子div时，您的代码会警告两个div。点击孩子会前往父母，然后再次触发laert，因为你的jQuery是针对所有div，而不是特定的div。您只能使用$("#children")定位仅子div。但是，您也可以使用stopPropagation()停止冒泡，这样可以在您点击任何div时使用警报，而不仅仅是特定的div。

当我只想选择子DIV时选择父DIV

4 个答案: