Почему мое предупреждение jQuery отображается дважды?

Question

Я использую jQuery. У меня проблема, когда оповещения идентификаторы списка отображаются два раза вместо одного.

Список:

<ul id="testnav">
    <li> <a href="#">Page 1</a></li>
    <li> <a href="#">Page2..</a>
        <ul id="subnav">
            <li id="content_1"><a href="#"> Page3</a></li>
        </ul>
    </li>
</ul>

Код:

$("li").click(function(){
    var current_id = $(this).attr('id');
    alert(current_id);
    // These alert two times, one is empty and another one is content_1
});

Почему код предупреждает два раза? Как заставить его выполнить один раз?

Answer 1

$ ("li"). Click () применяет событие click ко всем LI на странице.

При нажатии

<li> <a href="#">Page2..</a>
     <ul id="subnav">
          <li id="content_1"><a href="#"> Page3</a></li>
     </ul>
</li>

На самом деле вы нажимаете на внешнюю LI и на самую внутреннюю LI, что может вызвать событие дважды. Внешний LI не имеет идентификатора, поэтому он пустой, а внутренний LI имеет идентификатор «content_1», поэтому отображается.

Имеет ли это смысл?

Answer 2

Добавьте event.stopImmediatePropagation(); к вашему событию, и тогда оно не сработает дважды:

$("li").click(function(event)
{
       event.stopImmediatePropagation();
});

Answer 3

Вы вложили <li> внутрь другого <li>.

При нажатии на внутренний <li> вы получите событие для внутреннего <li> и внешнего <li>

Измените свой HTML-код на следующий, и вы получите оповещения о "Content_1" и "OUTER-LIST-ITEM", которые проясняют происходящее ...

<ul id="testnav">
    <li> <a href="#">Page 1</a></li>
    <li id="OUTER-LIST-ITEM">
        <a href="#">Page2..</a>
        <ul id="subnav">
            <li id="content_1"><a href="#"> Page3</a></li>
        </ul>
    </li>
</ul>

Answer 4

Вы испытываете всплеск событий .

Answer 5

Вы должны использовать, чтобы событие не всплывало в DOM-дереве.

Следующий код решит вашу проблему:

    $("li").click(function(event){ 
      var current_id=$(this).attr('id'); 
      alert(current_id);  
      event.stopPropagation();
    });

Answer 6

Он предупреждает один раз для каждого li, и ваша ссылка состоит из двух списков. Чтобы исправить это, предполагая, что вы хотите запускать только элементы subnav, измените первую строку вашего кода на

$("#subnav li").click(function(){

Если вам нужно больше списков, создайте класс для идентификации списков, которые вы хотите прикрепить к событию click.

Answer 7

Потому что $ ("li") возвращает все подходящие объекты. Поэтому, когда вы нажимаете один, тот, у которого id = content_1, вы также щелкаете по его родителю, у которого нет идентификатора.