jQuery clone () non clona le associazioni 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 riscontrato un piccolo problema che ho difficoltà a capire.

Sto utilizzando .clone()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 .clone(), i collegamenti non vengono preservati e devo aggiungerli di nuovo.

Qualcuno lo ha mai incontrato prima, qualcuno sa di una potenziale soluzione? Pensavo che l'uso .on()avrebbe dovuto preservare il legame per elementi che esistono ora o in futuro?

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

$element.clone(true, true);

clone ([withDataAndEvents] [, deepWithDataAndEvents])

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

deepWithDataAndEvents : un valore booleano che indica se devono essere copiati i gestori di eventi e i dati per tutti i figli dell'elemento clonato. Per impostazione predefinita, il suo valore corrisponde al valore del primo argomento (che per impostazione predefinita è false).

Attenzione che in .on()realtà non lega gli eventi ai target ma all'elemento a cui stai delegando. Quindi se hai:

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

Gli eventi sono effettivamente legati a #container. Quando si verifica un clic su un .buttonelemento, esso bolle fino #containerall'elemento. L'elemento che ha attivato l'evento viene valutato sul parametro del selettore di .on()e, se corrisponde, viene eseguito il gestore di eventi. Ecco come funziona la delega degli eventi.

Se cloni l'elemento #container, devi clonare in profondità con eventi e dati per .on()preservare i collegamenti effettuati .

Questo non sarebbe necessario se lo 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 di jQuery.

Maggiori informazioni su questo argomento:

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