事件处理程序触发了两次而不是一次

Question

很抱歉，我在几分钟内询问了两个问题。

在HTML文件中，我得到了一个父DIV标签三个子DIV标签：

<div id="container"> 
    <div id="frag-123">123</div> 
    <div id="frag-124">124</div> 
    <div id="frag-125">125</div> 
</div> 

现在，当我单击三个孩子DIV标签，我会看到两个警告框弹出，而不是一个： 第一个警告框会显示这样的事情： 大乱123，第二警报框将显示是这样的： 容器

我不知道为什么。 我只想获取子DIV的ID值，而不是父DIV的ID值。

<script> 
$(function() { 
    $("div").click(function() { 
      var imgID = this.id; 
      alert(imgID); 
    }); 

}); 
</script> 

请帮忙。

Answer 1

这是事件冒泡的情况。您可以停止事件冒泡

e.stopPropagation() 

里面的点击事件处理程序。

尝试

$(function() { 
    $("div").click(function(e) { 
      var imgID = this.id; 
      alert(imgID); 
      e.stopPropagation() // will prevent event bubbling 
    }); 
}); 

如果你要绑定click事件的div容器内的唯一的孩子elemets那么也可以把这样的

$("#container div").click(function(){ 
    var imgID = this.id; 
    alert(imgID); 
}); 

Answer 2

那是因为你要绑定的事件处理程序全部 DIV。相反，你要的是将其绑定只内container的DIV：

<script type="text/javascript"> 
$(function() { 
    $("#container div").click(function() { 
      var imgID = this.id; 
      alert(imgID); 
    }); 

}); 
</script>