jquery catch event from a generated element

Question

I am getting data from AJAX to build a table. This table will have a link to delete a row from the database. I'm having trouble getting a listener to respond to a click on the generated content's "remove" link.

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

The table creation is working fine and displaying in the browser; what's not working is the listener for remove_check class.

My guess is that the newly-created table is not actually in the DOM and the listener is unaware that the table exists? At any rate, how do I get the listener to respond to a click on the generated link?

Your guess is correct, and there's a couple ways to handle it. One would be to put the listner on the parent `#hidden-contrib-id` and have it handle the changes on it's child elements since `hidden-contrib-id` is there when your page loads the listeners are still there despite what changes inside ot it. Or you can wrap your listeners in a function and re-attach them to the dynamic elements after you update them `$('#checksEnteredContainer').html(buildTable(result)); // attach various listeners here` Or you could have a listener to listen for changes and attach listeners on updates, etc. — Dave Goten, Sep 14 '17 at 18:43
oh, duh... `.remove_check` doesn't exist when the listener is executed. So I would need to attach it to `#checksEnteredContainer`. Now to check out the link provided above... — Tim Morton, Sep 14 '17 at 19:24
:facepalm: `$('.remove_check').on('click', function() {` vs `$(document).on('click','.remove_check', function() {` Thanks to the referenced link. Won't be making that mistake again. — Tim Morton, Sep 14 '17 at 19:36

score -1 · Answer 1 · answered Sep 14 '17 at 18:45

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

Note :- use event delegation for dynamically created elements.

For more detail go here

score -1 · Answer 2 · answered Sep 14 '17 at 18:46

-1

Your guess is correct, of course. You can ...

delay the addition of the listener with setTimeout
use onclick to trigger the funtion
add the listener in the success function of the ajax request

All of these should make the listener work.

answered Sep 14 '17 at 18:46

Marco

227
1
11

jquery catch event from a generated element

2 Answers2