Why is my jQuery warning displayed twice?

Question

I am using jQuery. I have a problem when notifying list ids twice, not once.

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>

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 turns off code notification twice? How to execute it in one go?

Answer 1

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

When you click

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

In fact, you click on the external LI and internal LI, which may cause the event to fire twice. The external LI has no identifier, so it is empty, and the internal LI has the identifier "content_1", so it is displayed.

It makes sense?

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" ) . , , id = content_1, , .

Answer 7

It alerts you about this once for each, and your link - in two lists. To fix this, assuming you want subnav elements to run, change the first line of your code to

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

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