jQuery clone() no clona enlaces de eventos, incluso con on()

Question

He creado una serie de eventos de jQuery personalizados para su uso en aplicaciones web móviles. Funcionan muy bien y han sido probados. Sin embargo, me encontré con un pequeño problema que tengo problemas para comprender.

Estoy usando .clone() en algunos elementos dentro del DOM, que contienen un botón. El botón tiene algunos de los eventos personalizados vinculados (los eventos están vinculados usando .on()), pero. Desafortunadamente, cuando uso el .clone() de jQuery, las consolidaciones no se conservan, y tengo que volver a agregarlas.

¿Alguien ha encontrado esto antes, alguien sabe de un posible trabajo? Pensé que el uso de .on() se suponía que preservara el enlace de los elementos que existen ahora o en el futuro.

Answer 1

creo que se debe utilizar esta sobrecarga del método .clone():

$element.clone(true, true); 

clon ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEvents: Un valor booleano que indica si caso los manejadores y los datos deben ser copiados junto con los elementos. El valor predeterminado es falso.

deepWithDataAndEvents: Booleano que indica si se deben copiar los controladores de eventos y los datos de todos los elementos secundarios del elemento clonado. Por defecto, su valor coincide con el valor del primer argumento (que por defecto es falso).

---

Mira que .on() en realidad no se unen los sucesos a los objetivos, pero al elemento va a delegar a. Así que si usted tiene:

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

Los eventos son en realidad binded a #container. Cuando se produce un clic en un elemento .button, sube hasta el elemento #container El elemento que desencadenó el evento se evalúa en el parámetro selector de .on() y, si coincide, se ejecuta el controlador de eventos. Así es como funciona la delegación de eventos.

Si clonas el elemento #container, tienes que clonar a fondo los eventos y datos para conservar los enlaces realizados con .on().

Esto no sería necesario si estuviera usando .on() en un elemento primario de #container.

Answer 2

Debe tener en cuenta que la funcionalidad de clonación profunda se agregó a la versión 1.5 jQuery.

Más información sobre este tema:

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