중첩 목록, jquery 및 stopPropagation

Question

중첩 된 메뉴가 예상대로 작동하지 않는 문제가 있습니다. stopPropagation()에 관한 StackOverflow에 많은 것들을 살펴 봤지만 작동하지 않는 것 같습니다.

사이트는 Wordpress를 기반으로 합니다만, 불행히도 사이트의 메뉴에서 생성 된 HTML을 직접 제어 할 수는 없습니다. 이 프로젝트의 원래 목표는 Wordpress가 기본적으로 지원하지 않는 메뉴 항목에 onClick 기능을 추가하는 것이 었습니다. 그 부분이 작동합니다 - 메뉴를 클릭하면 이벤트가 시작됩니다. 예! 그러나 부모 요소의 이벤트도 발생합니다. 그 때문에 문제가 발생합니다 (클릭 추적 기능으로 onClick 기능이 추가 된 이후). 은 워드에 의해 렌더링 여기

은 (가독성 단축) 메뉴의 첫 번째 부분이다

jQuery(document).ready(function($) { 
    $("li#menu-item-104 a").on("click", function(event) { 
     console.log('Learn About Us menu'); 
    }); 
    $("li#menu-item-266 a").on("click", function(event) { 
     console.log('What We Do menu'); 
    }); 
    $("li#menu-item-268 a").on("click", function(event) { 
     console.log('Company News menu'); 
    }); 
    $("li#menu-item-269 a").on("click", function(event) { 
     console.log('Our Leadership menu'); 
    }); 
    $("li#menu-item-557 a").on("click", function(event) { 
     console.log('Recognition menu'); 
    }); 
    $("li#menu-item-270 a").on("click", function(event) { 
     console.log('Our Heritage menu'); 
    }); 
    $("li#menu-item-331 a").on("click", function(event) { 
     console.log('Brand Guidelines menu'); 
    }); 
}); 

:

여기

<ul id="menu-main-menu" class="nav-menu"> 
    <li id="menu-item-104"><a href="#">Learn About Us</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-266" class=""><a href="#">What We Do</a></li> 
      <li id="menu-item-268" class=""><a href="#">Company News</a></li> 
      <li id="menu-item-269" class=""><a href="#">Our Leadership</a></li> 
      <li id="menu-item-557" class=""><a href="#">Recognition</a></li> 
      <li id="menu-item-270" class=""><a href="#">Our Heritage</a></li> 
      <li id="menu-item-331" class=""><a href="#">Brand Guidelines</a></li> 
     </ul> 
    </li> 
</ul> 

메뉴의 페이지에 첨부되어 생성 jQuery 코드의

하위 요소 (우리가하는 일, 회사 뉴스 등) 중 하나를 클릭하면 onclick 이벤트가 성공적으로 발생하고 부모 요소도 발생합니다. 내가 '회사 소식'메뉴 항목을 클릭한다면

그래서, 콘솔이 포함됩니다 :

Learn About Us menu 
Company News menu 

키커 내가 event.stopImmediatePropagation을 추가하는 경우()이다; jquery 블록 각각에 부모 요소 만 발생합니다. event.stopPropagation(); 아무런 효과가없는 것 같습니다.

자식 요소를 호출 할 때 부모 요소가 실행되지 않도록 jQuery에 추가해야하는 항목은 무엇입니까?

Answer 1

하위 선택자 대신 자손 선택자를 사용하여 앵커 요소를 대상으로 지정했습니다.

$("#menu-item-104 > a").on("click", function (event) { 
    console.log('Learn About Us menu'); 
}); 
$("#menu-item-266 > a").on("click", function (event) { 
    console.log('What We Do menu'); 
}); 

데모 : 당신이 li#menu-item-104 a을 말할 때 Fiddle

, 그것이라고 점점 Learn About Us 요소와 그 핸들러의 결과로 모든 하위 메뉴 항목이 포함 li#menu-item-104 내부의 모든 앵커 요소에 클릭 처리기를 바인딩 전파를 막으려 고 할 때조차도.

이제 모든 앵커 요소에 첫 번째 처리기가 추가되었으므로 stopPropagation()은 아무런 영향을 미치지 않습니다.