jquery lồng nhau li nhấp vào cuộc gọi sự kiện nhiều lần

Question

Tôi có cấu trúc sau.

<ul id="browser" class="filetree"> 

     <li><span class="folder">Folder 1</span> 

      <ul> 

       <li><span class="file">Item 1.1</span></li> 

      </ul> 

     </li> 

     <li><span class="folder">Folder 2</span> 

      <ul> 

       <li><span class="folder">Subfolder 2.1</span> 

        <ul id="folder21"> 

         <li><span class="file">File 2.1.1</span></li> 

         <li><span class="file">File 2.1.2</span></li> 

        </ul> 

       </li> 

       <li><span class="file">File 2.2</span></li> 

      </ul> 

     </li> 

     <li class="closed"><span class="folder">Folder 3 (closed at start)</span> 

      <ul> 

       <li><span class="file">File 3.1</span></li> 

      </ul> 

     </li> 

     <li><span class="file">File 4</span></li> 

    </ul> 

Trong js Tôi có chức năng sau.

$("#browser li").click(function(){ 


}); 

Khi tôi nhấp vào li Tệp 2.1.1. Chức năng gọi 3 lần

lần đầu tiên cho li file 2.1.1, lần thứ hai cho li Subfolder 2.1 và lần thứ ba cho li thư mục 2.

bất cứ ai có thể cho tôi giải pháp để gọi hàm đúng một lần?

Trợ giúp của bạn được đánh giá cao. Cảm ơn.

Answer 1

Đó là vì bạn có nhiềuli yếu tố dưới #broswer.

Hãy thử điều này thay vì:

$("#browser>li").click(function(){ 
    //only direct children of #browser 
    //your code 
}); 

Hoặc bạn có thể sử dụng event.stopPropagation():

$("#browser li").click(function(event){ 
    event.stopPropagation(); 
    //your code 
}); 

Answer 2

Thay đổi chức năng của bạn để

$("#browser li").click(function(event){ 
    event.stopPropagation(); 
    //do your other stuff 

}); 

Bằng cách đó, nhấp chuột vào cấp dưới li sẽ không "bong bóng" lên cấp cao hơn li.

Answer 3

Điều này là do các sự kiện thực tế "bong bóng" lên dom của bạn, do đó bạn nếu bạn bấm

file 2.1.1, nó cũng sẽ được lắng nghe bởi File 2.1 và tập 2 để sửa chữa sự kiện thay đổi này để

$("#browser li").click(function(e){ 
    //Your code here 
    e.stopPropagation(); 
}); 

Answer 4

Thay vì sử dụng sự kiện nhấp chuột trên đối tượng li, thêm phần tử khác (trong khoảng mẫu) và xử lý nhấp vào đó. Bằng cách này vẫn có thể bong bóng cho các sự kiện cao hơn chỉ không bong bóng qua li lồng nhau.

//Run the following to see the no li bubble result 
 

 
$(".nobubble").on('click',function(){ 
 
    $("#result").append($(this).attr("data-id") +"<br />") 
 
    }); 
 

 
//uncomment the following to see the li bubble result 
 
/*$(".bubble").on('click',function(){ 
 
    $("#result").append($(this).attr("data-id") +"<br />") 
 
    });*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="bubble" data-id="li-a"><span class="nobubble" data-id="span-a">a</span> 
 
    <ul> 
 
     <li class="bubble" data-id="li-b"><span class="nobubble" data-id="span-b">b</span> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 
<div id="result"> 
 
</div>