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>

Answer 4

您遇到event bubbling。

Answer 5

您应该使用阻止事件冒泡DOM树。

以下代码将解决您的问题：

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

Answer 6

因为$（“li”）返回所有匹配的对象。因此，当您单击id = content_1的那个时，您还会单击其父ID，而不是id。

Answer 7

它会为每个li发出一次警报，并且您的链接是两个深度列表。要修复它，假设您只想触发subnav项，请将代码的第一行更改为

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

如果您需要更多列表，请创建一个类来标识要附加到点击事件的列表。

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

7 个答案: