problème de liaison d'événement de nouvel élément jquery solution_jquery

La surveillance des événements de js est différente de celle de css Tant que le style de css est défini, qu'il soit existant ou nouvellement ajouté, il aura les mêmes performances. Mais l'écoute des événements n'est pas le cas. Vous devez lier les événements à chaque élément individuellement.

Un exemple courant est celui du traitement des tables. Il y a un bouton Supprimer à la fin de chaque ligne. Cliquez dessus pour supprimer cette ligne.

Copier le code Le code est le suivant :

< tbody>

;
;/bouton>

>Habituellement, je lierais comme ça




Copier le code

Le code est le suivant :

jQuery (function($){ //Déjà Il y a un bouton de suppression initialisé pour lier l'événement de suppression $(".del").click(function() { $(this).parents( "tr").remove(); });

Tout fonctionne parfaitement pour le bouton supprimer qui existait avant domready. Mais si vous utilisez js pour ajouter dynamiquement quelques lignes après domready, les boutons des lignes nouvellement ajoutées perdront tout effet.

Comment résoudre ce problème ? 4 solutions sont proposées ci-dessous :


Solution n°0 - méthode onclick

Si vous ignorez le principe de séparation de la structure et du comportement, généralement, je ferai cela.
Notez que la fonction deltr à ce moment doit être une fonction globale et doit être placée en dehors de jQuery(function($) {}). Si elle est placée à l'intérieur, elle devient une fonction locale, et onclick en html ne peut pas être appelé !



Copier le code

Le code est le suivant :

jQuery(function($){ //Ajouter une ligne$("#add2").click( function( ){ $("#table2>tbody").append('') }); });

//La fonction pour supprimer des lignes doit être placée en dehors de la fonction domready
function deltr(delbtn){
$(delbtn).parents("tr").remove();
}



Solution n° 1 - Répéter la liaison Le La formule


consiste à lier les gestionnaires d'événements aux éléments existants lorsque domready est en place,
puis à les lier à nouveau lorsque des éléments nouvellement ajoutés sont ajoutés.

Copier le code

Le code est le suivant :

jQuery(function($){ //Définissez la liaison de l'événement du bouton de suppression//Écrivez-le à l'intérieur pour éviter la contamination de l'espace de noms globalfunction deltr(){ $(this).parents("tr").remove(); }

//Il y a déjà un bouton de suppression initialisé pour lier le delete event
$( "#table3 .del").click(deltr);
//Ajouter une ligne
$("#add3").click(function(){
$('
// Supprimer ici Le bouton est à nouveau lié à l'événement.
.find(".del").click(deltr).end()
.appendTo($("#table3>tbody")); >});
});



Solution n°2 - Méthode de bouillonnement d'événement


En utilisant le principe du bouillonnement d'événement, on donne l'ancêtre élément de ce bouton Fonction de gestionnaire d'événements de liaison.
Utilisez ensuite l'objet event.target pour déterminer si cet événement a été déclenché par l'objet que nous recherchons.
Habituellement, vous pouvez utiliser certains attributs DOM, tels que event.target.className, event.target.tagName, etc. pour juger.

Copier le code

Le code est le suivant :

jQuery(function($){
//Quatrième La suppression Liaison d'événement de bouton d'une table
$("#table4").click(function(e) {
if (e.target.className=="del"){
$(e. target) .parents("tr").remove();
};
};
//Ajouter une liaison d'événement de bouton de la quatrième table
$("#add4") .click(function (){
$("#table4>tbody").append('')
});



Solution n° 3 - Méthode de copie d'événement.
Les solutions ci-dessus peuvent être considérées comme relativement faciles à mettre en œuvre même si vous n'utilisez pas la bibliothèque jQuery. Mais cette solution s'appuie davantage sur jQuery. Et cela doit nécessiter jQuery version 1.2 ou supérieure. Les versions inférieures de jQuery nécessitent des plug-ins.
Les deux solutions ci-dessus ont beaucoup réfléchi à la fonction de suppression et ont modifié diverses méthodes de déclenchement et de liaison. Cette solution est différente. Elle peut être liée au moment de la création tout comme les éléments purement statiques habituels. Mais lorsque nous ajoutons une nouvelle ligne, modifions-la. Nous ne voulons plus ajouter une nouvelle ligne en épissant des chaînes comme ci-dessus. Cette fois, nous essayons de copier les éléments du DOM. Et lors de la copie, copiez-le avec les événements liés. Après la copie, utilisez find ou similaire pour modifier les éléments internes.
En même temps, tout comme dans cet exemple, si vous supprimez tous les éléments, alors le modèle est nécessaire. Si vous ne les supprimez pas, vous n'aurez peut-être pas besoin d'utiliser le modèle. Afin d'éviter toute suppression accidentelle, j'ai masqué le modèle ici.
J'ai utilisé le clone unique (true) dans jQuery

Copiez le code Le code est le suivant :

.template{display:none;}

Supprimer

;

Cette ligne avait à l'origine
(function($){
//Supprimer la liaison d'événement du bouton de la cinquième table
$("#table5 .del").click(function() {
$(this) .parents("tr ").remove();
});
//Ajouter une liaison d'événement de bouton de la cinquième table
$("#add5").click(function(){
$("# table5>tbody>tr:eq(0)")
//Copier avec l'événement
.clone(true)
//Supprimer la balise du modèle
.removeClass( "template")
//Modifier les éléments internes
.find("td:eq(0)")
.text("Nouvelle ligne")
.end()
/ /Insérer un tableau
.appendTo($("#table5>tbody"))
});
});
Commentaires généraux :

Les 4 options ci-dessus ont leurs propres avantages et inconvénients.
Plan n°0, il n'y a pas de séparation entre structure et comportement, et cela pollue l'espace de noms global. Le moins recommandé. Donc je ne considère même pas cela comme un plan. Mais pour les débutants en js, il peut être utilisé pour des projets d'urgence.
Option 1, tout à fait satisfaisante, rien de bon ou de mauvais
Option 2, cette méthode utilise pleinement les avantages du bouillonnement d'événements js. Et le plus efficace. Mais en même temps, comme cette solution ignore le puissant sélecteur de jQuery, elle sera plus gênante si trop d'exigences d'attributs d'éléments sont impliquées. Vous errerez parmi les bonnes et les mauvaises relations de nombreuses conditions. Plus tard, je me suis souvenu que je pouvais utiliser $(event.target).is(selector) dans jQuery comme condition. Cela peut grandement améliorer l’efficacité du développement, mais réduire légèrement l’efficacité de l’exécution.
Le plan n°3, c'est le plan qui, selon moi, incarne le mieux l'idée de séparation de la structure et du comportement. Mais les inconvénients sont également évidents. La dépendance à jQuery est trop élevée, sinon il faut écrire une fonction qui copie les événements ensemble, ce qui est évidemment extrêmement difficile pour les débutants. Mais du point de vue des tendances futures, cette solution reste fortement recommandée.

Il n'y a pas de numéro défini sur quel forfait choisir. Cela dépend de votre projet et de votre maîtrise de js et de l'idée de séparation de structure et de comportement. Le plus adapté est le meilleur.

Supplémentaire :

Transformez le plan 3 en un style de séparation structure-comportement parfait.
Tout d'abord, celui avec modèle est l'élément modèle. C'est la source de toutes les copies. Afin d'éviter toute suppression accidentelle, elle est définie sur invisible. Cet élément de modèle est également facultatif si la lumière ne sera pas supprimée. Parce que vous pouvez copier n’importe quel élément existant pour le mettre en boucle.
Deuxièmement, ajoutez une répétition à chaque élément répété pour faciliter le bouton Supprimer pour trouver ce niveau d'éléments. Ceci est facultatif et parfois non obligatoire.
Enfin, ajoutez une classe à chaque élément à modifier afin qu'il puisse être facilement retrouvé à l'aide de find. Par exemple, j'ai une classe de contenu ici, et la classe nouvellement ajoutée peut modifier la valeur à l'intérieur.
Cela complète un cas parfait de séparation de la structure et du comportement.

Copier le code Le code est le suivant :

>
;td class="content">Cette ligne avait à l'origine
tr>

">Supprimer





>

Cette ligne avait à l'origine
Supprimer
Nouvelle ligne
	Supprimer
Ajouter une nouvelle ligne	Supprimer< /button>
Voici le modèle
Supprimer
Delete
Voici le modèle	Supprimer
Delete
Cette ligne avait à l'origine
	Ajouter

jQuery(function($){
//Supprimer la liaison d'événement du bouton de la sixième table
$("#tbody6 .del" ).click(function() {
$(this).parents(".repeat").remove();
});
//Ajouter une liaison d'événement de bouton pour la sixième table
$("#add6") .click(function(){
$("#tbody6>.template")
//Copier avec l'événement
.clone(true)
/ /Supprimer les balises de modèle
. removeClass("template")
//Modifier les éléments internes
.find(".content")
.text("Nouvelle ligne")
.end ()
//Insérer un tableau
.appendTo($("#tbody6"))
});
});


De même, ce js s'applique également à la structure HTML suivante




Copiez le code

Le code est le suivant :

Voici le modèle
Supprimer

>Cette ligne avait à l'origine
Delete ;/li>

Cette ligne avait à l'origine "del">Supprimer

;/script>