jquery iç içe li tıklama olayı birden çok kez çağırıyor

Question

Aşağıdaki yapıya sahibim.

<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> 

yılında js ben aşağıdaki işlevi var.

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


}); 

ben li Dosyası 2.1.1 üzerine tıklandığında. fonksiyon li Dosyası 2.1.1, li Subfolder 2.1 ve li Klasör için üçüncü kez ikinci kez 3 kez

ilk kez çağırır 2.

kimse bana tam olarak bir kez işlevi çağırmak için bir çözüm verebilir misiniz?

Yardımınız büyük ölçüde Appriciated. Teşekkürler.

Answer 1

Çünkü #broswer altında çokli öğeniz var. ,

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

Answer 2

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

}); 

için bu yolu işlevinizi değiştirin

alt düzey li üzerine tıklayın: event.stopPropagation()

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

Yoksa kullanabilirsiniz:

yerine bu deneyin üst düzey li'a "kabarcık atmayacak".

Answer 3

Bu gerçek olaylara kaynaklanmaktadır "balon" senin dom kadar size böylece

Dosya 2.1.1, aynı zamanda Dosya 2.1 tarafından duyulacaktır tıklayıp

için bu değişim olayı düzeltmek için 2 File eğer

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

Answer 4

Li nesnesindeki tıklama olayını kullanmak yerine, başka bir öğe ekleyin (örnek olarak). Bu yol, daha yüksek etkinlikler için hala balonlaşabilir, sadece yuvalanmış li ile kabarmaz. O #browser içinde

//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>