Bind change event to checkbox in each DataTables row

Question

I have added a checkbox for each row in DataTables. When table data is loaded, I bind change event to each checkbox like this:

fnInitComplete: function(oSettings, json) {

      $("input[type='checkbox']").on("change", function() {

            // checking if any checkbox is checked

      });
}

The problem is that change event is added only for the first page. If I navigate to other pages and click on any checkbox, no event is fired. It works only if I refresh the page. Same is with Show entries. What would be a clever way to deal with this issue?

Answer 1

Try using delegated events:

$("#table_id").on('change',"input[type='checkbox']",function(e){
    //your code 
});

This tells the table to run the specified function when a 'change' event originated from an input[type='checkbox'] that is its descendant.

You don't need to register this handler in the table initialization by the way, you can just do it after the document is ready.

More about delegated events

Answer 2

You can place your code here .on( 'page.dt', function () { // do something}) check the link for more explanation about this or you could place this event around with below code.

$(function(){$("input[type='checkbox']").on("change", function() {

            // checking if any checkbox is checked

      });})