Event not triggered on table's dynamically added rows

Question

I have an example here with table where rows are dynamically added. Each row should trigger event:

  $("#tblTest > tbody > tr").on("click", function(e){    
    alert();        
  });

This code doesn't work for dynamically added rows. What is the problem?

Answer 1

It is adding the click to the tr on creation. You need to instead attack the click to the tbody then filter to tr.

  $("#tblTest > tbody").on("click", "tr", function(e){    
    alert();        
  });

Answer 2

Try like this..

$(function() {
  $(document).on("click", "#tblTest > tbody > tr", function(e) {
    alert();
  });
});

Answer 3

You should change your code to use the Body for the .on event:

  $("body").on("click", "#tblTest > tbody > tr", function(e){    
    alert();        
  });

Answer 4

For dinamically added elements you need to use event delegation:

$(document).on("click", "#tblTest > tbody > tr", function(e){    
    alert('test');        
  });

Updated Codepen.

Answer 5

When you dynamically add a row, you must bind a new onClick listener to the added element. Your code only adds the listener to elements already on the page; not newly created elements. Something like this will work fine:

var AddRow = function(){
     // add element
     $("#tblTest > tbody").append("<tr><td>Test name</td><td>Last anme</td></tr>");
     // add listener to new element
     $("#tblTest > tbody > tr:last-of-type").on("click", function(e){    
          alert();        
     });
}

the :last-of-type psuedo-selector is key to avoid binding multiple listeners to the cells.

Answer 6

You can use event delegation.

 $(document).off('click.namespace').on('click.namespace', '#tblTest > tbody > tr', function (e) {
alert();           
  });

It will rebind the Events. So dynamically appended rows also bind with events.