Click event not triggering on the revisited pages in datatable

Sumanraj

Click event not triggering on the re-visited pages in datatable: I've a a table(client side) with pagination enabled, which has individual row selection checkbox and select-all as well. But in case of individual checkbox check/uncheck event not firing when I switched to the already visited pages. But It's working at the first time for any of the pages. Please help/Suggest

kthorngren

Best practice is to use delegated events as shown in this example. How are you creating your events?

Kevin

Sumanraj

Dear @kthorngren,

Have created event on mRender on ColumnDef

"mRender": function (data, type, row) {
return "<div style='width:20%;'>
           <input Id='" + row.Id + "' ng-click='toggleSelectItem(this)'
           type='checkbox'/>
           </div>"; 

I've also tried event delegation way by putting event on table level and delegated that all the way down to checkbox though it fires but it doesn't work as expected still some time event doesn't fired.

Thanks
Sumanraj

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Please build a simple test case showing us what you have so we can help debug and offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Sumanraj

Dear @kthorngren,

In the event delegation approach attached event with .one() method fires event only one time that solves my purpose.
Unlike with .on() method, it fires multiple click events on checkbox check/uncheck.

However, It is resolved & working as per my requirements.

Sample code :

// Handling re-visited pages individual check/uncheck case
this.$scope.tableClicked = function (item) {
$('#table_avail_attr_val tbody').one('click', '.chkClickable', function (e) {
console.log({ Id: e.target.id, Name: e.target.value });
});
}

Thanks you

Regards,
Sumanraj.

kthorngren

Sounds lie you are instantiating the click event handler inside a function which is called multiple times. This will cause multiple click event handlers to be created. Instantiate the event handler once outside the function, like in the document.ready() function.

Kevin