Quando / Dove creare / assegnare gestori di eventi ai suoi elementi

1. Sempre, JavaScript e jQuery non fanno mai nulla se non lo esegui dopo il caricamento di una pagina intera.

2. Con jQuery, se non esiste nessuno di questi elementi, non succede nulla.

3. Il contenuto aggiunto dinamicamente non avrà i gestori che sono stati applicati dalle precedenti chiamate jQuery. Non sono sicuro di cosa accadrà se eseguirai di nuovo il codice, ma potresti finire con elementi con più gestori collegati in cui intendevi solo collegarne uno.

4. Se stai cambiando dinamicamente il set di oggetti che hanno bisogno di gestori di eventi, è meglio mettere i gestori di eventi su un elemento padre statico, ad esempio il documento. Puoi utilizzare il metodo jQuery on per collegare un gestore di eventi al documento e passargli una stringa di filtro che causerà il tuo gestore solo per sparare quando l'evento si verifica su un elemento che corrisponde al filtro e con l'elemento abbinato come valore this . Il manuale di jQuery chiama questo evento delegato:

   $(parentElement).on(eventName, filterString, function(){});
   

   L'unico svantaggio possibile degli eventi delegati è che la gestione degli eventi potrebbe essere un po 'più lenta, ma non posso pensare ad un esempio realistico in cui questo è un problema pratico.

Se vuoi associare eventi a elementi caricati dinamicamente, puoi utilizzare Bubbling di eventi . JQuery ti aiuterà con questo! Dovrai associare l'evento con la funzione on (invece di click ecc.) E utilizzare i selettori recenti (non il nome effettivo - sono solo io che li chiamo). Ad esempio:

HTML:

<div id="add-stuff-here"></div>

JavaScript:

$(function(){
        var addStuffHere=$('#add-stuff-here');
        addStuffHere.on('click','button[doit]',function(){
            var newButtonIndex = addStuffHere.children().length+1;
            var newButton = $('<button/>');
            newButton.text(newButtonIndex);
            if(1 == newButtonIndex%2){
                newButton.attr('doit', 'doit');
            }
            addStuffHere.append(newButton);
        });
        addStuffHere.append($('<button doit="doit">1</button>'));
});

Ho associato l'evento click a div e gli ho assegnato il selettore in ritardo button[doit] . Ora questo evento si applica a tutti i bambini di div che corrispondono al selettore (i pulsanti con numero dispari - quelli pari non ottengono doit ). Cliccando su questi pulsanti creerai nuovi pulsanti, e se sono dispari riceveranno anche l'evento perché è legato al genitore.

Dietro le quinte, gli eventi si riempiono di bolle sugli elementi di contenimento, quindi l'evento si avvia sul pulsante e salta al div dove viene gestito. Qui JQuery funziona è magico: quando hai un selettore in ritardo, JQuery identifica la fonte dell'evento e, se corrisponde al selettore in ritardo, JQuery lo tratterà come l'evento dell'elemento figlio. Se non hai un selettore in ritardo, JQuery lo tratterà come l'evento del contenitore.

Un altro approccio, che ho usato prima di apprendere il bubbling degli eventi, è quello di associare gli eventi agli elementi creati dinamicamente. Facendolo manualmente è complicato, quindi ho creato alcune funzioni di supporto: registerJQueryFunction e applyJQueryTo . applyJQueryTo invocherà tutte le funzioni registrate con registerJQueryFunction su un elemento o elementi, e tali funzioni imposteranno gli eventi.

Funziona ancora meglio se hai creato un framework (anche un framework wrapper) per il caricamento dinamico, poiché puoi semplicemente integrare applyJQueryTo e non preoccuparti mai.