Ereignis an dynamisch eingefügte Schaltfläche auf Seite mit jquery mit .on() anhängen

Question

Ich habe eine Seite, auf der ich Benutzerbeiträge zurückgebe, diese Beiträge können mit einem jQuery - Code kommentiert werden, nachdem ein neuer Kommentar gepostet wurde neuer Kommentar unter dem Post zusammen mit einem Delete Knopf. Das Problem ist, dass die Schaltfläche Delete nicht auf dem neu eingefügten Element funktioniert, wenn ich die Seite nicht neu lade. Ich habe gelesen, dass die Lösung die .on() -Methode verwendet, aber ich bin ein wenig verwirrt, wie dies zu implementieren ist. Ich habe eine Funktion, die den Pfostenteil mit dem neu eingefügten Kommentar aktualisiert und dies ist die Funktion, die den Kommentar löscht:

$(document).ready(function() { 

    $("button[id*='deletecmnt_']").click(function() { 

     var id = this.id.replace('deletecmnt_', ''); 

     var comment_card_id = ('#comment_' + id); 

     var token = $(this).data('token'); 

     $.ajax({ 
      url: '../comment/' + id, 
      type: 'post', 
      data: {_method: 'delete', _token: token}, 
      success: function() { 


       // Checks for display of comment card and removes it 
       if ($(comment_card_id).is(":visible")) { 

        $(comment_card_id).fadeOut("fast"); 

       } 
      } 
     }) 

    }) 

}); 

Ich verstehe nicht, was hier geändert werden muss und wie.

Answer 1

Sie müssen die Ereignisdelegierung für dynamisch hinzugefügte Elemente verwenden. In Ihrer .on() -Methode müssen Sie den Selektor hinzufügen, an den der Handler nach der Erstellung angehängt werden soll.

$(document).ready(function(){ 

    $("body").on("click", "button[id*='deletecmnt_']", function() { 
    // codes 
    } 
}); 

Dies wird auf Klicks auf Elemente noch nicht erstellt, die mit Ihrem Selektor übereinstimmen. Hier ist die JQuery-API-Doc-Seite für weitere Informationen: http://api.jquery.com/on/