从ul li ul

Question

我基本上试图从动态量为“li ul”的ul li中获取数据属性。 （文件浏览器），但无论我点击子文件夹li时我做了什么，它给了我rootlevel文件夹dataid和子文件夹li dataid。我需要它只选择我点击的实际li。

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

您的点击活动是＆＃34;冒泡＆＃34; DOM，即触发点击后面所有元素的点击次数，因此您需要阻止此操作：

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