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

I am using jQuery. I have a problem when alerts the IDs of a list shows two times, instead of once.

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

The list:

<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>

The code:

$("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
});

Why dopes the code alert two times? How do I make it execute a single time?

为什么编码代码警报两次?如何让它执行一次?

7 个解决方案

#1

$("li").click() is applying the click event to all LIs on the page.

$(“li”)。click()将click事件应用于页面上的所有LI。

When you click

当你点击

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

You're actually clicking the outer LI, and the inner-most LI, which would cause the event to fire twice. The outer LI has no ID, so it's empty, and the inner LI has an ID of "content_1", so that displays.

您实际上是单击外部LI和最内部的LI,这将导致事件触发两次。外部LI没有ID,因此它是空的,内部LI的ID为“content_1”,因此显示。

Does that make sense?

那有意义吗?

#2

Add event.stopImmediatePropagation(); to your event and then it won't fire twice:

添加event.stopImmediatePropagation();对你的事件,然后它不会发射两次:

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

#3

You have a <li> nested inside another <li>.

你有一个

嵌套在另一个

里面。

When you click on the inner <li>, you will get the event for the inner <li> and the outer <li>

当您单击内部

时,您将获得内部

和外部

的事件

Change your HTML to the following and you will get alerts of "Content_1" and "OUTER-LIST-ITEM" which make it clearer what is going on...

将您的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>

#4

You are experiencing event bubbling.

您正在经历事件冒泡。

#5

You should use prevent the event from bubbling up the DOM tree.

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

The following code will solve your problem:

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

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

#6

Because $("li") returns a all matching objects. So when you click one, the one with id=content_1, you also click its parent which does not have an id.

因为$(“li”)返回所有匹配的对象。因此,当您单击id = content_1的那个时,您还会单击其父ID,而该ID不具有ID。

#7

It alerts once for each li and your link is two lists deep. To fix it, assuming you only want subnav items to trigger, change the first line of your code to

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

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

If you need more lists create a class to identify lists you want to attach to the click event.

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

#1