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?

On page change you have to fire that event again, for make that happen. or either place this function on the load event. — Nalin Aggarwal
– Nalin Aggarwal, Commented Aug 11, 2016 at 15:02

Sebastianb · Accepted Answer · 2016-08-11 15:17:15Z

11

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

answered Aug 11, 2016 at 15:17

Sebastianb

2,06024 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nalin Aggarwal · Accepted Answer · 2016-08-11 15:08:49Z

1

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

      });})

answered Aug 11, 2016 at 15:08

Nalin Aggarwal

8885 silver badges9 bronze badges

Collectives™ on Stack Overflow

Bind change event to checkbox in each DataTables row

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related