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


J'ai créé une série d'événements jQuery personnalisés à utiliser dans les applications Web mobiles. Ils fonctionnent très bien 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. Le bouton contient certains événements personnalisés liés (les événements sont liés en utilisant .on()), mais. Malheureusement, lorsque j'utilise jQuery .clone(), les liaisons ne sont pas conservées et je dois les ajouter à nouveau.

Quelqu'un at-il déjà rencontré cela, est-ce que quelqu'un connaît un travail potentiel? Je pensais qu'en utilisant .on() était censé préserver la liaison pour les éléments qui existent maintenant ou dans le futur?


80
2018-03-03 20:35


origine


Réponses:


Je pense que vous devriez utiliser cette surcharge du .cloner() méthode:

$element.clone(true, true);

clone ([withDataAndEvents] [, deepWithDataAndEvents]) 

withDataAndEvents: 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 à la valeur du premier argument (false par défaut).


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

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

Les événements sont effectivement liés à #container. Quand un clic sur un .button élément se produit, il bouillonne jusqu'à la #container element L'élément qui a déclenché l'événement est évalué sur le paramètre selector de .on() et s'il correspond, le gestionnaire d'événement est exécuté. Voici comment fonctionne la délégation d'événements.

Si vous clonez l'élément #container, vous devez cloner en profondeur avec les événements et les données pour les liaisons effectuées avec .on() à préserver.

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


177
2018-03-03 20:43



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

Plus d'infos sur ce sujet:

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


4
2018-06-07 08:38