jQuery clone () non clonazione di binding di eventi, anche con on ()

Ho creato una serie di eventi jQuery personalizzati da utilizzare nelle applicazioni Web mobili. Funzionano alla grande e sono stati testati. Tuttavia, ho incontrato un piccolo problema che non riesco a capire.

Sto usando .clone() su alcuni elementi all’interno del DOM, che contengono un pulsante. Il pulsante ha alcuni degli eventi personalizzati ad esso associati (gli eventi sono associati usando .on() ), ma. Sfortunatamente, quando uso jQuery’s .clone() , i binding non vengono mantenuti e devo aggiungerli di nuovo.

Qualcuno l’ha già incontrato prima, qualcuno sa di un potenziale lavoro in giro? Pensavo che l’uso di .on() avrebbe dovuto preservare l’associazione per gli elementi che esistono ora o in futuro?

Penso che dovresti usare questo overload del metodo .clone () :

 $element.clone(true, true); 

clone ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEvents : un booleano che indica se i gestori di eventi e i dati devono essere copiati insieme agli elementi. Il valore predefinito è falso.

deepWithDataAndEvents : un booleano che indica se devono essere copiati i gestori di eventi ei dati per tutti i figli dell’elemento clonato. Di default il suo valore corrisponde al valore del primo argomento (che di default è falso).


.on() attenzione che .on() realtà non lega gli eventi agli obiettivi ma all’elemento a cui stai delegando. Quindi se hai:

 $('#container').on('click', '.button', ...); 

Gli eventi sono effettivamente associati a #container . Quando si verifica un clic su un elemento .button , viene visualizzato l’elemento #container L’elemento che ha triggersto l’evento viene valutato sul parametro selector di .on() e se corrisponde, viene eseguito il gestore eventi. Ecco come funziona la delega degli eventi.

Se cloni l’elemento #container, devi clonare in profondità con eventi e dati per i binding creati con .on() per essere conservati.

Questo non sarebbe necessario se tu stessi usando .on() su un genitore di #container .

Dovresti essere consapevole del fatto che la funzionalità di clonazione profonda è stata aggiunta alla versione 1.5 jQuery.

Maggiori informazioni su questo argomento:

http://api.jquery.com/clone/