jquery catch event à partir d'un élément généré

Question

Je reçois des données d'AJAX pour construire une table. Cette table aura un lien pour supprimer une ligne de la base de données. J'ai du mal à faire en sorte qu'un auditeur réagisse à un clic sur le lien "supprimer" du contenu généré.

<!-- contribId is populated initially from PHP --> 
<input id="hidden-contrib-id" value="<?= $contribId ?>" /> 

<div id="checksEnteredContainer"> 
</div> 

<script> 
$(document).ready(function(){ 

    // get data via ajax and build table 
    buildCheckEnteredTable($('#hidden-contrib-id').val()); 

    // various listeners here... 

    $('.remove_check').on('click', function() { 
    alert($(this).data('contribution-id')); 
    }); 

}); 

/** 
* Get checks from database 
*/ 
function buildCheckEnteredTable(contribId) { 
    var url = "/path/to/script"; 
    var response = $.post(url, {action: 'getChecks', contribId: contribId}); 

    response.done(function(result) { 

    // build html table from the data 
    $('#checksEnteredContainer').html(buildTable(result)); 
} 

function buildTable(data) { 
    var numberOfRows = data.length; 
    var rows=''; 
    for(i=0; i<numberOfRows; ++i) { 
    rows += '<tr>' + 
      '<td>' + data[i].checkNumber + '</td>' + 
      '<td>' + data[i].amount + '</td>' + 
      '<td><a href="#" class="remove_check" data-contribution-id="' + data[i].checkId + '">remove</a></td>' 
      '</tr>'; 
    } 

    var table = '<table class="table"><tr><th>Check Number</th><th>Amount</th><th></th></tr>' + 
       rows + 
       '</table>'; 

    return table; 
} 

La création de la table fonctionne correctement et s'affiche dans le navigateur; ce qui ne fonctionne pas est l'écouteur pour la classe remove_check.

Ma conjecture est que la table nouvellement créée n'est pas réellement dans le DOM et l'auditeur n'est pas au courant que la table existe? Quoi qu'il en soit, comment puis-je amener l'auditeur à répondre à un clic sur le lien généré?

Answer 1

// Insted of this click, you can use below click function 

$('.remove_check').on('click', function() { 
    alert($(this).data('contribution-id')); 
    }); 


    $(document).on('click','.remove_check', function() { 
      alert($(this).data('contribution-id')); 
     }); 

Remarque: - utilisez la délégation d'événements pour les éléments créés dynamiquement.

Pour plus de détails, allez here

Answer 2

Votre estimation est correcte, bien sûr. Vous pouvez ...

• retard l'ajout de l'auditeur avec setTimeout
• utilisation onclick pour déclencher le funtion
• ajouter l'auditeur dans la fonction de succès de la demande ajax

Tous ceux-ci devraient faire travailler l'auditeur.