jQuery clone() ne clone pas les liaisons d'événements, même avec on()

Question

J'ai créé une série d'événements jQuery personnalisés destinés à être utilisés dans des applications Web mobiles. Ils fonctionnent parfaitement et ont été testés. Cependant, j'ai rencontré un petit problème que j'ai du mal à comprendre.

J'utilise .clone() sur quelques éléments du DOM, qui contiennent un bouton. Certains des événements personnalisés sont liés au bouton (les événements sont liés à l'aide de la fonction .on() ), mais. Malheureusement, lorsque j'utilise la fonction jQuery .clone() les reliures ne sont pas conservées, et je dois les ajouter à nouveau.

Quelqu'un a-t-il déjà rencontré ce problème ou connaît-il une solution de contournement ? Je pensais qu'en utilisant .on() était censé préserver la liaison pour les éléments qui existent maintenant, ou dans le futur ?

Answer 1

Je pense que vous devriez utiliser cette surcharge de la fonction .clone() méthode :

$element.clone(true, true);

clone( [withDataAndEvents] [, deepWithDataAndEvents] )

avecDataAndEvents : Un booléen indiquant si les gestionnaires d'événements et les données doivent être copiés avec les éléments. La valeur par défaut est false.

deepWithDataAndEvents : Un booléen indiquant si les gestionnaires d'événements et les données de tous les enfants de l'élément cloné doivent être copiés. Par défaut, sa valeur correspond à celle du premier argument (qui a la valeur false par défaut).

---

Attention .on() ne lie pas réellement les événements aux cibles mais à l'élément que vous déléguez. Donc si vous avez :

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

Les événements sont en fait liés à #container . Lorsqu'un clic sur un .button se produit, il remonte jusqu'à l'élément #container élément L'élément qui a déclenché l'événement est évalué sur le paramètre sélecteur de .on() et s'il correspond, le gestionnaire d'événements est exécuté. C'est ainsi que fonctionne la délégation d'événements.

Si vous clonez l'élément #container, vous devez effectuer un clonage profond avec les événements et les données pour les liaisons réalisées avec l'option .on() à préserver.

Cela ne serait pas nécessaire si vous utilisiez .on() sur un parent de #container .

Answer 2

Vous devez savoir que la fonctionnalité de clonage profond a été ajoutée à la version 1.5 de jQuery.

Plus d'informations sur ce sujet :

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