從ul li獲取正確的值

Question

我基本上試圖從動態數量的子「li ul」中獲取來自ul li的數據屬性。 （文件瀏覽器），但不管我做什麼，當我點擊子文件夾裏，它給了我rootlevelfolder dataid和子文件夾li dataid。我需要它只選擇實際的我點擊。

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，即觸發您的點擊次數點擊李後面的所有元素，所以你需要防止這種情況：

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