ul li ul에서 올바른 값 가져 오기

Question

기본적으로 ul li에서 동적 속성 인 "li ul"을 사용하여 데이터 속성을 얻으려고합니다. (파일 브라우저),하지만 내가 하위 폴더를 클릭 할 때 내가 상관없이 그것은 rootlevelfolder dataid 및 하위 폴더 데이터 ID를 제공합니다. 나는 그것을 클릭하기 만하면 실제 리를 선택해야한다.

HTML :

<ul> 
    <li class="folder rootfolder" data-id="1"> Root 
     <li class="folder rootlevelfolder" data-id="2"> First level 
     <ul> 
     <li class="folder subfolder" data-id="3"> Sublevel</li> 
     </ul> 
     </li> 
    <li class=" folder rootlevelfolder" data-id="4">First level</li> 
    </li> 
    </ul> 

JS :

$(document).on('click', '.folder', function(){ 
var dataid = $(this).attr('data-id'); 
//$('.output').append(dataid+'<br>'); 
console.log(dataid); 
}); 

// 필자는이 이전에 요청 된 경우, 나는 사과 나를 던져주십시오 각

$('.folder').each(function(){ 
$(this).click(function(){ 
var dataid = $(this).attr('data-id'); 
//$('.output').append(dataid+'<br>'); 
console.log(dataid); 
}); 
}); 

으로 시도 이걸 다루는 무언가를 찾지 못했기 때문에 링크를해라.

Answer 1

귀하의 클릭 이벤트 당신이이 문제를 방지 할 필요가 있으므로, 귀하의 클릭 리 뒤에있는 모든 요소에 대한 클릭을 유발 즉, DOM "버블 링"

어떤`.output` 클래스 요소를보고하지

$(document).on('click', '.folder', function(e) { 
    e.stopImmediatePropagation(); 
    var dataid = $(this).attr('data-id'); 
    $('.output').append(dataid+'<br>'); 
});