事件處理程序觸發了兩次而不是一次

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>