jquery catch-Ereignis von einem generierten Element

Question

Ich erhalte Daten von AJAX, um eine Tabelle zu erstellen. Diese Tabelle enthält eine Verknüpfung zum Löschen einer Zeile aus der Datenbank. Ich habe Probleme, einen Listener dazu zu bringen, auf einen Klick auf den Link "Entfernen" des generierten Inhalts zu reagieren.

<!-- 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; 
} 

Die Tabellenerstellung funktioniert einwandfrei und wird im Browser angezeigt. Was nicht funktioniert, ist der Listener für Klasse.

Meine Vermutung ist, dass die neu erstellte Tabelle nicht wirklich im DOM ist und der Listener nicht weiß, dass die Tabelle existiert? Wie kann ich den Hörer auf einen Klick auf den generierten Link reagieren lassen?

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')); 
     }); 

Hinweis: - Verwenden Sie Ereignisdelegierung für dynamisch erstellte Elemente.

Für weitere Details gehen here

Answer 2

Ihre Vermutung, natürlich richtig ist. Sie können ...

• Verzögerung die Zugabe des Zuhörers mit setTimeout
• Verwendung onclick die funtion auslösen
• fügen Sie den Hörer in der Erfolgsfunktion des Ajax-Request

alle Diese sollten den Zuhörer zum Funktionieren bringen.