Ciao e benvenuto, sì, ciò che hai trovato è corretto e si può risolvere; in jQuery puoi adoperare quella tecnica chiamata "event delegation"Mi pare di aver capito, facendo delle ricerche sui vari forum, che se si generano dinamicamente degli elementi sui quali si vuole poter richiamare l'evento onclick ci sono dei problemi ma non ho capito se e come si possono risolvere. Qualcuno ha una soluzione per me, ammesso che esista?
La causa del problema si trova nel modo che usi per assegnare il gestore del click per quegli elementi.
Sostanzialmente utilizzi questo script:
dove il selettore si riferisce direttamente agli elementi selezionati a cui vuoi applicare il gestore click.codice:$("a.active").on('click', function(e) {
Questo script, essendo eseguito giusto una prima volta al caricamento della pagina, seleziona quegli elementi e applica correttamente il gestore. Da precisare che ogni oggetto sulla pagina ha una sua specifica identità nel momento in cui viene creato e finché resta presente nella pagina (in senso lato), ma quando l'oggetto non esiste più, tutti i riferimenti a questo sono persi.
Questi elementi vengono infatti "distrutti"; perciò, qualsiasi proprietà, metodo o riferimento che questi possedevano, cessa di esistere e risulterà chiaramente inesistente dopo la loro distruzione. Il fatto che tu stia ricreando poi una "simil-copia" di quel codice HTML (anche se gli elementi e gli id usati risultano uguali ai precedenti) non determina la riassegnazione degli stessi gestori applicati agli elementi iniziali perché si tratta sostanzialmente di oggetti diversi.
Va da sé che il comportamento da te rilevato sia più che lecito e quantomeno logico secondo questo ragionamento.
Per risolvere, in jQuery generalmente si utilizza la tecnica della delegazione. Sostanzialmente, per un dato elemento (o meglio, per ciascuno degli elementi restituiti da uno specifico selettore jQuery), la gestione di un qualsivoglia suo evento viene delegata ad un suo elemento ascendente, il quale si è sicuri che non venga distrutto; in questo modo si ha certezza che il gestore applicatogli (con delega) sia mantenuto "in vita" anche quando l'elemento diretto, a cui questo si riferisce, viene a mancare.
Quando viene ricreato un elemento simile (identificabile attraverso lo stesso selettore jQuery usato per la delega) jQuery provvederà a riassegnargli anche i gestori degli eventi definiti attraverso quella precedente delega.
L'elemento delegato può essere il diretto genitore dell'elemento specificato o un qualsiasi suo discendente nella struttura gerarchica del documento fino ad arrivare all'oggetto radice "document"
Puoi utilizzare ad esempio una sintassi del genere:
.codice:$(document).on('click', 'a.active', function(e) {
Qui un articolo per approfondire sul lato tecnico:
jQuery, event delegation senza segreti
PS: giusto un mio personale parere; trovo l'impostazione del tuo script abbastanza ridondante (leggasi, codice ripetitivo che potrebbe essere adeguatamente sfoltito); personalmente risolverei in modo più "dinamico" magari usando un unico blocco HTML che sia rimodellato opportunamente, lasciando invariate le parti fisse e integrando con delle condizioni solo i dati significativi. Posso però intuire che quello da te postato sia solo un esempio di un elaborato più esteso, per cui mi limito solo a fare questa osservazione sul codice qui presente.
EDIT: pardon, ho visto solo ora che ciro78 aveva appena risposto; riassume grossomodo tutto ciò che ho indicato qui, compreso il codice ridondante
EDIT2: anzi... la soluzione CSS accennata da ciro è sicuramente la strada migliore da seguire
Rispondi quotando
