为什么我的jQuery警报显示两次？

Question

我正在使用jQuery.当警报列表的ID显示两次而不是一次时,我遇到了问题.

列表:

<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没有ID,因此它是空的,内部LI的ID为"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>