Impossible de cliquer sur le bouton plus d’une fois lors de l’ajout de données html

J’ai un problème avec jQuery. J’utilise ajax pour envoyer l’identifiant à supprimer de la firebase database, puis je renvoie le fichier html pour mettre à jour le contenu sans recharger la page (j’utilise struts 2), la première exécution ou la rechargement de la page, mon bouton fonctionne correctement J’essaie de cliquer à nouveau sur le bouton, il ne répond pas.

entrez la description de l'image ici

Mon script

$(document).ready(function() { $(".btnEdit").click(function() { alert("Edit"); }); $(".btnDelete").click(function() { id = $(this).attr('id'); alert("Delete ID : " + id); $.ajax({ url: "delete", type: 'POST', data: {'id': id}, cache: false, success: function(data, textStatus, jqXHR) { $('.catagoryContent').remove(); $('.container').append(data); }, error: function(jqXHR, textStatus, errorThrown) { alert("error"); } }); }); });

Désolé, j’ai oublié de retourner le code de données.

      ID  Name  Edit / Delete  
 
   ${catagory.id}  ${catagory.name}

ID	Name	Edit / Delete
${catagory.id}	${catagory.name}

Lorsque le document est prêt, vous initialisez toutes les balises avec la classe “btnDelete” dans la fonction click. Lorsque vous effectuez un appel ajax avec succès, vous remplacez tout votre contenu par une réponse du serveur. À ce stade, vous supprimez tous vos boutons et ajoutez de nouvelles données avec de nouveaux boutons.

jQuery n’écoute pas ces boutons car le $ (“. btnDelete”). click (… n’a été défini qu’au chargement de la page.

si vous changez

 $(".btnDelete").click(function() {

 $(document).on("click", ".btnDelete", function() {

cela fonctionnera toujours après que vous ayez ajouté de nouvelles données à .container La fonction “on” se déclenche également lorsque vous ajoutez dynamicment de nouveaux tags avec la classe “.btnDelete” (Voir ici )

Vous n’écoutez pas l’événement click sur votre code HTML mis à jour.

Tu devrais utiliser

 $list.on('click', '.btnEdit', function() { ... })

où $list est l’élément contenant les éléments (probablement un

)

Cela est dû au fait que le gestionnaire d’événements click est attaché au démarrage de la page. Mais lorsque vous rechargez la partie de votre page, l’ancien bouton avec le gestionnaire onclick est supprimé.

La décision est d’utiliser

 $(document.body).delegate('.btnDelete', 'click', function(){...})

au lieu de

 $(".btnDelete").click(function(){...})

De cette façon, vous attacherez le gestionnaire d’événements à l’élément body (qui se déclenchera toujours), et jQuery vérifiera si l’élément cliqué a la classe .btnDelete ou non. Cela fonctionnera donc même si vous supprimez ces boutons, puis en insérez de nouveaux.

Une autre approche consiste à attacher des gestionnaires onclick aux boutons chaque fois qu’ils sont créés, mais je pense que la première approche est plus facile.