Ajouter une classe dans Ajouter une nouvelle ligne

$("#btnAdd").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "View.aspx/AddResponsibility", 
     data: '{"ClientCode":"' + $("#hfClientCode").val() + '","ResponsibilityCode":"' + $("#txtResponsibility").val() + '"}', 
     async: true, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
     $('#tblRespon > tbody:last').append("<tr><td>" + $("#txtResponsibility").val() + "</td><td>" + $("#txtFullName").val() + "</td><td><a class='delete' id='btnDelete' name='btnDelete' value='" + $("#txtResponsibility").val() + "'>" + "Delete" + "</a></td></tr>"); 
     }, 
     error: function (msg) { 
     alert(msg.d); 
     } 
    }); 
    });

Je dois ajouter une classe à '< a>' qui est un nouvel élément que j'ajoute. La façon dont je l'ai essayé ci-dessus semble pas fonctionner comme la fonctionAjouter une classe dans Ajouter une nouvelle ligne

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

ne se déclenche pas comme il le fait habituellement avec un élément déjà contenu sur la page.

Source

2012-07-26 AzaRoth91

Je pense que vous pensez que la dernière ligne entraîne un événement click sur tous les éléments avec suppression de classe. Ce n'est pas vrai. Il sélectionne tous les éléments avec la classe delete et ajoute ensuite l'événement click. Donc, c'est une question où vous le placez. Puisque le nouvel élément est dans une boucle asynchrone, votre classeur d'événements le devrait aussi. – Jeroen

Vous devez utiliser la fonction .on() comme ceci:

$("#tblRespon").on("click",".delete",function(){

Source

2012-07-26 16:20:44 Engineer

Merci pour la réponse exacte. – AzaRoth91

Il est parce que balise d'ancrage vous injectez au DOM plus tard. Cela signifie que peu importe où vous avez lié votre fonctionnalité de clic, cela n'aura aucun effet sur les éléments nouvellement injectés. La solution consiste à utiliser le jQuery on. on fonctionnera pour les éléments actuels et futere.

Modifier cette

$(".delete").click(function() { 
    //some code here 
})

$(document).on("click",".delete",function() { 
    //some code here 
})

on est disponible à partir de la version 1.7+ . Si vous utilisez une version antérieure, pensez à utiliser live()

Source

2012-07-26 16:20:52 Shyju

Merci pour la réponse et l'explication – AzaRoth91

Si je ne me trompe pas, vous avez besoin de réaffecter le enlever gestionnaire aux éléments ajoutés:

success: function (msg) { 
     $('#tblRespon > tbody:last').append("<tr><td>" + $("#txtResponsibility").val() + "</td><td>" + $("#txtFullName").val() + "</td><td><a class='delete' id='btnDelete' name='btnDelete' value='" + $("#txtResponsibility").val() + "'>" + "Delete" + "</a></td></tr>"); 

     $('.delete').click(function(){ 
      //your code 
     }) 

},

Je sais qu'il ya de meilleures façons, mais juste besoin de savoir que chaque fois que vous avez ajouté des éléments, vous devez enregistrer les gestionnaires pour ces éléments ajoutés

Source

2012-07-26 16:23:44 manix

Ajouter une classe dans Ajouter une nouvelle ligne

Répondre

Questions connexes