jquery nested llamadas de evento li clic varias veces

Question

Tengo la siguiente estructura.

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

En js tengo la siguiente función.

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


}); 

Cuando hice clic en li File 2.1.1. La función llama 3 veces

primera vez para li Archivo 2.1.1, segunda vez para subcarpeta li 2,1 y una tercera vez para Carpeta li 2.

Puede alguien darme la solución a llamar a la función exactamente una vez?

Su ayuda ha sido solicitada en gran medida. Gracias.

Answer 1

Eso es porque tiene muchosli elementos en #broswer.

Tal vez puedas probar:

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

O puede utilizar event.stopPropagation():

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

Answer 2

Cambiar la función para

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

}); 

De esta manera, el clic en el nivel inferior li no "burbujeará" al nivel superior li.

Answer 3

Esto es debido a los acontecimientos de hecho "burbuja" de su dom por lo que si hace clic en

Archivo 2.1.1, que también se escuchará por File 2.1 y 2 del archivo de solucionar este evento de cambio de

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

Answer 4

En lugar de utilizar el evento click en el objeto li, agregue otro elemento (en ejemplo span) y haga clic en eso. De esta manera todavía puede burbujear para eventos más altos simplemente no burbujea a través de li anidado.

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