jQuery click () на вложенном div

Question

Код, вероятно, может объяснить это лучше, чем я:

<div class="wrapper">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

<script>
$('div').click(function(){
    var class_name = $(this).attr('class');
    do_something(class_name);
});
</script>

Когда я нажимаю на inner1 div, он запускает do_something() с обоими inner1 div И wrapper.

С созданным сайтом многократных вложенных div'ов будет много. Есть ли динамический способ исправить эту проблему и запустить только div верхнего уровня (в данном случае inner1)?

Answer 1

Использование stopPropagation:

$('div').click(function(e){
    e.stopPropagation();
    var class_name = $(this).attr('class');
    do_something(class_name);
});

---

С другой стороны: вы уверены, что это то, что вы пытаетесь сделать?Возможно, вы захотите изменить селектор ($('div')) так, чтобы он был настроен только на те DIV, которые вам нужны.

Answer 2

Вам нужно предотвратить всплывание события.С jQuery вы бы сделали это:

$('div').click(function(e)
{
    e.stopPropagation();

    // Other Stuff
});

Answer 3

Событие вспыхивает, пока вы не остановите его методом stopPropagation:

$('div').click(function(e){
  e.stopPropagation();
  var class_name = $(this).attr('class');
  do_something(class_name);
});

Answer 4

<div class="wrapper">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

<script>
$('div').click(function(ev){
    var class_name = $(this).attr('class');
    do_something(class_name);
    ev.stopPropagation();
});
</script>

Answer 5

Ваш селектор - «div», поэтому при каждом нажатии на него запускается div. В этом примере это включает обертку, inner1 и inner2.

Если вы хотите, чтобы inner1 запускала эту функцию, ваш код будет выглядеть так:

$('.inner1').click(function(){
    var class_name = $(this).attr('class');
    do_something(class_name);
});