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

Question

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 contiene alcuni degli eventi personalizzati associati (gli eventi sono associati utilizzando .on()), ma. Sfortunatamente, quando uso jQuery .clone(), i collegamenti 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?

Answer 1

Credo che si dovrebbe utilizzare questo overload del metodo .clone():

$element.clone(true, true); 

clone ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEvents: Un booleano che indica se evento gestori e dati dovrebbero 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).

---

Attenzione che .on() in realtà non si legano i fatti agli obiettivi, ma per l'elemento si delega a. Quindi, se avete:

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

Gli eventi sono in realtà rilegata a #container. Quando si verifica un clic su un elemento .button, esso bolle all'elemento #container L'elemento che ha attivato l'evento viene valutato sul parametro selettore di .on() e se corrisponde, viene eseguito il gestore eventi. Ecco come funziona la delega degli eventi.

Se si clona l'elemento #container, è necessario clonare in profondità eventi e dati per i binding effettuati con .on() da conservare.

Questo non sarebbe necessario se si stesse utilizzando .on() su un genitore di #container.

Answer 2

Si dovrebbe essere consapevoli 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/