2012-06-20 22 views
5

Ho la seguente struttura.jquery nidificato li click chiamate di eventi più volte

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

In js Ho la seguente funzione.

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


}); 

Quando ho fatto clic su li File 2.1.1. La funzione chiama 3 volte

prima volta per Li File 2.1.1, la seconda volta per Li sottocartella 2.1 e una terza volta per cartelle li 2.

Qualcuno mi può dare la soluzione per chiamare la funzione esattamente una volta?

Il tuo aiuto è molto apprezzato. Grazie.

risposta

11

Questo è perché avete moltili elementi sotto #broswer.

Prova a modificare:

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

Oppure si può utilizzare event.stopPropagation():

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

tua corretta in quanto #browser> Li è figlio diretto di #browser ma ciò significherebbe qualsiasi #browser> li> li andrei essere chiamati? – AbstractChaos

+0

@AbstractChaos esattamente, ma tutti gli altri 'li' sono all'interno di un elemento diretto di' # browser' – Neal

+0

ma se, ad esempio, l'OP fa clic su file.2.1.1 che è $ browser> li> li> li quindi non sparerebbe ?, lo prenderai alla bolla in alto, credo. dipende dai requisiti di utilità di quello – AbstractChaos

4

Cambia la funzione di

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

}); 

In questo modo, il clic sul livello più basso li non "bolla" al livello superiore li.

2

Ciò è dovuto agli eventi fatto "bolla" il vostro dom modo che se si fa clic su

File 2.1.1, sarà anche farsi ascoltare dal file 2.1 e File 2 per risolvere questo evento modifica

0

Anziché utilizzare l'evento click sull'oggetto li, aggiungere un altro elemento (nell'esempio di span) e gestirlo fare clic su di esso. In questo modo è ancora possibile creare bolle per eventi superiori semplicemente non bolle attraverso li annidati.

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

Problemi correlati