클릭 한 자식 목록 항목을 jQuery에서만 가져 오는 방법은 무엇입니까?

Question

나는 여러 수준의 정렬되지 않은 목록이 있습니다. 클릭 핸들러를 목록 항목에 연결하려고 시도하고 클릭 할 때 클래스 active을 추가하려고 시도하지만 하위 목록 항목을 클릭하면 클릭 핸들러가 하위 항목과 상위 항목 모두에 대해 트리거됩니다. 나는 모든 레벨에서 같은 요소 인 li을 가지고 있다고 생각합니다. 이벤트를 특정 레벨에만 붙이는 방법은 무엇입니까?

HTML 마크 업

<ul> 
    <li>test</li> 
    <li>test 
    <ul> 
     <li>test</li> 
     <li>test 
    <ul></li> 
    <li>test</li> 
    <li>test</li> 
</li> 
<li>test</li> 
<li>test</li> 
</ul> 

JAVASCRIPT

$("li").click(multiLevelClickHandler); 
function multiLevelClickHandler(event) 
{ 
    event.preventDefault(); 
    var $this = $(this); 
    console.log($this); 
    var $actives = $this.siblings().find(".active"); 

    if($actives.length > 0){ 
     $actives.removeClass('active'); 
     setTimeout(function(){ 
      $this.addClass('active'); 
     }, 250); 
    } else { 
     $this.addClass('active'); 
    } 
} 

여기

입니다 JsFiddle : 여기

코드의 샘플이지만, 행동을 볼 수 jsfiddle 클릭 http://jsfiddle.net/zcLzA/

개별적으로 클릭 핸들러를 연결하려고 시도했습니다. 각 레벨의 목록 항목이 있지만 항상 클릭 된 목록 항목뿐만 아니라 상위 항목에도 연결됩니다.

Answer 1

사용 event.stopPropagation();는 :

function multiLevelClickHandler(event){ 
    event.stopPropagation(); 

이것은 DOM을 버블 링에서 이벤트를 중지합니다.

http://jsfiddle.net/zcLzA/2/

심판 : 당신의 multiLevelClickhandler() 함수의 끝에 http://api.jquery.com/event.stoppropagation/

Answer 2

사용 event.stopPropagation().

Answer 3

$ ('li') 선택자로 한정자가 없습니다. JsFiddle에서 부모를 사용하여 요소를 찾은 다음 해당 부모 내에서 ul 요소의 자식 인 모든 li을 찾습니다. 요구 사항을 올바르게 이해하고 있다면 이벤트의 특정 수준의 중첩 목록을 대상으로합니다.

필터를 더 추가하려면 더 많은 한정자를 제공하여 적절한 수준으로 조정하십시오. 이것은 클래스 또는 요소 선택자 (또는 원하는 수준을 정확하게 선택하는 창의적인 방법)가 될 수 있습니다.

// class selector 
$('ul.levelClass li'); 

또는

는

// element selector 
$('ul ul /* repeat for the number of levels */ li'); 

이 운반 덜 효율적인 방법은 이벤트 대상가 등등 등등과 요소의 자식이고, 요소의 자식인지 확인하는 귀하의 요구 사항에 도달하지만, 이렇게하면 당신은 당신의 중첩 된 목록의 특정 수준으로 핸들러를 첨부하고자하는 가정 혼란과 불필요한

업데이트

내 의견과 함께 제시되는 다른 답변 (event.stopPropagation() 또는 event.stopImmediatePropagation())의 제안에 따라 내 의견을 해결하고 문제를 해결할 수 있습니다.당신은 당신의 핸들러를 첨부 할 수준을 선택한 후 버블 링에서 이벤트를 중지하면, 당신은 이벤트를

코드에서이 예제받는 부모를 중지

elemContainer.find('ul.nestedLevelClass li').on("click", SpecificLevelHandler) 

var SpecificLevelHandler = function(oEvent) 
{ 
    oEvent.stopPropagation() // stop the event from bubbling up 
    // oEvent.stopImmendiatePropagation() // stop the event from firing any other handlers at all 
    var oElem = $(this); 
    /* Handle the event */ 
}