jQuery clone () não clonagem de ligações de events, mesmo com on ()

Eu criei uma série de events personalizados do jQuery para uso em aplicativos da web móveis. Eles funcionam muito bem e foram testados. No entanto, encontrei um pequeno problema que estou tendo dificuldade em entender.

Eu estou usando .clone() em alguns elementos dentro do DOM, que contêm um botão. O botão tem alguns dos events personalizados vinculados a ele (os events são vinculados usando .on() ), mas. Infelizmente, quando eu uso o .clone() do jQuery, as ligações não são preservadas, e eu tenho que adicioná-las novamente.

Alguém já encontrou isso antes, alguém sabe de um potencial de trabalho? Eu pensei que usando .on() deveria preservar a binding para elementos que existem agora ou no futuro?

Eu acho que você deve usar essa sobrecarga do método .clone () :

 $element.clone(true, true); 

clone ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEvents : Um Booleano que indica se os manipuladores de events e os dados devem ser copiados junto com os elementos. O valor padrão é falso.

deepWithDataAndEvents : Um Booleano que indica se os manipuladores de events e dados para todos os filhos do elemento clonado devem ser copiados. Por padrão, seu valor corresponde ao valor do primeiro argumento (cujo padrão é false).


.on() que .on() não vincula os events aos destinos, mas ao elemento para o qual você está delegando. Então, se você tem:

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

Os events são realmente #container a #container . Quando um clique em um elemento .button ocorre, ele sobe para o elemento #container O elemento que acionou o evento é avaliado no parâmetro seletor de .on() e, se corresponder, o manipulador de events é executado. É assim que funciona a delegação de events.

Se você clonar o elemento #container, precisará clonar profundamente com events e dados para que as ligações feitas com .on() sejam preservadas.

Isso não seria necessário se você estivesse usando .on() em um pai de #container .

Você deve estar ciente do fato de que a funcionalidade de clonagem profunda foi adicionada à versão 1.5 jQuery.

Mais informações sobre este tópico:

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