[jquery] delega eventi

[piz82]

Ciao amici,

in un precedente thread avevo posto una domanda a proposito dei selettori di classe che pareva non funzionassero.
Alla fine ho semplicemente delegato l'evento click, senza usare il metodo ONE:

jQuery('ul').on('click', '> li.klass', function() { ...

Ora ho un altro problema.

Dunque, il mio menu, che è multilivello, è una cosa di questo tipo:

<ul id="ul1">
    <li id="li1" class="klass">
       <ul id="ul2">
          <li id="li2"class="klass">
             <ul>
                <li class="klass"></li>
                <li class="klass">
                   <ul>
                      <li class="klass"></li>
                   </ul>
                </li>
             </ul>
          </li>
          <li class="klass"></li>
       </ul>
    </li>
    <li class="klass">
       <ul>
          <li class="klass"></li>
          <li class="klass"></li>
       </ul>
    </li>
 </ul>

Succede che all'apertura di un LI di primo livello il comportamento sia quello che mi aspetto, cioè che l'elemento su cui faccio click sia il UL principale e l'elemento delegato sia il LI sotto il mio puntatore del mouse.

Ma cosa succede se clicco un LI di secondo livello? L'elemento su cui agisce jQuery, basandosi sull'istruzione che ho scritto in alto, è ancora il UL di primo livello.
Cioè, se clicco su li1 il UL padre che viene correttamente considerato è ul1; ma se clicco su li2 vorrei che il UL corrispondente fosse ul2, invece è sempre ul1.

Come risolvo?

[cavicchiandrea]

Usa gli id al posto del tag ul

[piz82]

In verità ho messo nell'esempio gli id ul1 e ul2 solo per far capire la questione. Nella realtà i miei UL e LI non hanno id.
Io devo rendere dinamico il funzionamento, ad ogni profondità dell'albero.

Non ho messo vincoli di profondità, può essere qualsiasi.

[KillerWorm]

Ciao, senza entrare nel dettaglio, mi pare che sia semplicemente un problema di "propagazione dell'evento", tecnicamente chiamato event bubbling. Nel tuo caso, nel momento in cui tu clicchi su un elemento interno, anche l'elemento esterno (a cui hai comunque applicato la gestione del click) sta ricevendo a sua volta un click. In realtà il click avviene per entrambi gli elementi, anche se a te sembra che avvenga solo su quello più esterno.

Per risolvere potresti usare il metodo stopPropagation() di jQuery, da inserire opportunamente dentro la funzione che gestisce il click, in modo che la propagazione si interrompa sul primo click considerato, che sarà quello effettuato sull'elemento più interno della serie.