Why click event handler doesn't work after sorting the table

Question

I'm using jQuery DataTables and I have a table which is generated using a foreach loop. In each row generated, 2 buttons are made with a different number added to a data attribute.

After the page loads, dataTables kicks in and renders the table. I have an onClick handler that responds to the buttons when clicked.

However, when I sort table columns that dataTables is capable of doing, the buttons simply do not respond to the onClick handler.

What can I do to prevent dataTables from causing the buttons to do nothing when either of the sorting columns are used?

Answer 1

Do not use $('.button').click , because those buttons are recreated when sorted, instead use on jquery event

$(document).on('click', '.button',function(){
  //your code
});

Answer 2

You need to use delegated event handlers because your buttons most likely get recreated when table is redrawn.

Below is a sample code that you need to update to match your structure:

$('#example tbody').on('click', '.button', function(e){
   // your code
});

Replace example with ID attribute of your table and replace .button with appropriate CSS selector for your buttons.

See jQuery DataTables – Why click event handler does not work for more information.