Обработчик событий срабатывает дважды, а не один раз

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, вместо одного появятся два окна с предупреждениями: В первом окне предупреждения будет показано что-то вроде этого: frag-123, и во втором окне предупреждения будет что-то вроде этого: контейнер

Я не знаю почему. Я просто хочу получить значение идентификатора дочернего DIV, а не значение родительского DIV.

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

}); 
</script>

Пожалуйста, помогите.

Answer 1

Это случай всплытия событий. Вы можете остановить всплытие событий, указав

e.stopPropagation()

внутри обработчика события click.

Попробуйте

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

Если вы хотите привязать событие клика только к дочерним элементам внутри контейнера div, вы можете указать вот так

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

Answer 2

Это потому, что вы привязываете обработчик событий к всем DIV. Вместо этого вам нужно привязать его только к DIV в пределах container:

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

}); 
</script>