Ajouter, supprimer et Ajouter à nouveau l'élément supprime son événement

Question

J'ai un lien hypertexte avec un ID qui, lorsqu'il est cliqué, exécute un certain événement en utilisant JQuery. JQuery enregistre l'existence de ce lien au chargement du document. À un moment donné au cours de la visite de l'utilisateur. Je supprime ce lien et je le réintroduis plus tard. Cependant, cet événement n'est pas déclenché à nouveau lorsque l'on clique sur ce lien après l'avoir supprimé et ajouté.

Pourquoi est-ce le cas et comment puis-je y remédier ? Quelque chose à voir avec la liaison d'événements ? Ou dois-je simplement ajouter un attribut onclick ?

Answer 1

Vous avez utilisé une balise comme celle-ci pour ajouter l'événement de clic :

$('#speciallink').click(function(){
  // do something
  return false;
});

Cela liera l'événement aux éléments qui sont sélectionnés à ce moment-là.

Le fait de supprimer un lien et de le rajouter créera effectivement un nouvel élément, sans cet événement. Vous pouvez utiliser la méthode "live" pour ajouter des règles qui seront appliquées aux événements correspondant à la règle, même si ces éléments sont créés après la création de la règle :

$('#speciallink').live("click",function(){
  // do something
  return false;
});

Answer 2

Ne supprimez pas le lien de l'arbre DOM. Au lieu de cela, basculez simplement sa visibilité avec show() et hide().

La suppression de l'élément de l'arbre DOM avec remove() supprimera l'élément et tous ses gestionnaires d'événements, même si vous le rajoutez avec le même identifiant.

Answer 3

Vous devrez lier ce gestionnaire d'événement au nouvel élément lorsqu'il est ajouté ou vous pouvez utiliser la méthode suivante live() au lieu de lier pour obtenir ce dont vous avez besoin.

En fait, le gestionnaire d'événement fait référence à l'élément d'origine. Lorsque cet élément est supprimé, même si un nouvel élément est ajouté avec le même identifiant, il s'agit d'un élément différent.

Answer 4

Si vous supprimez complètement l'élément, vous devrez rattacher tous les écouteurs d'événements à l'élément lorsque vous le recréerez.

Sinon, il suffit de masquer l'élément en définissant son style comme display:none avec .show() y .hide()