내 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

$ ITEM ("리 "). 클릭()는 페이지의 모든 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 bubbling이 발생합니다.

Answer 3

<li>은 <li> 안에 중첩되어 있습니다.

당신이 내부 <li>을 클릭하면 내부 <li>에 대한 이벤트 및 외부 <li>

변경하려면 HTML을 얻을 것이다 다음 당신은 외부 목록 - ""Content_1 "의 경고를 얻을 것이다 "무슨 일이 일어나고 있는지가 명확하게 ...

<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

$ ("li")은 일치하는 모든 개체를 반환하기 때문입니다. 따라서 id = content_1 인 항목을 클릭하면 id가없는 해당 상위 항목을 클릭하게됩니다.

Answer 5

각 li에 대해 한 번 경고하고 귀하의 링크는 두 개의 깊은 목록입니다. 당신이 더 많은 목록을 사용자가 클릭 이벤트에 첨부 할 목록을 식별하는 클래스를 작성해야 할 경우에만 트리거 항목을 subnav 원하는 가정이 문제를 해결하려면,

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

에 코드의 첫 번째 줄을 변경합니다.

Answer 6

이벤트가 DOM 트리를 버블 링하지 않도록해야합니다.

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

Answer 7

이 이벤트에 event.stopImmediatePropagation();를 추가 한 후 두 번 발생하지 않습니다 :

다음 코드가 문제를 해결하는 것입니다

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