Visualizzazione dei risultati da 1 a 4 su 4

Discussione: [jquery] delega eventi

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2016
    Messaggi
    7

    [jquery] delega eventi

    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:
    codice:
    jQuery('ul').on('click', '> li.klass', function() { ...
    Ora ho un altro problema.

    Dunque, il mio menu, che è multilivello, è una cosa di questo tipo:
    codice:
    <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?

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,129
    Usa gli id al posto del tag ul
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2016
    Messaggi
    7
    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.

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.