While utilizing the jQuery datatables plugin, I encountered an issue where the event click function only worked on the first page and not on subsequent pages.
To address this problem, I discovered a helpful resource at https://datatables.net/faqs/
Q. My events don't work on the second page
A. When attaching events to cells in a table controlled by DataTables, you need to be cautious with your approach. Due to DataTables removing nodes from the DOM, static event listeners may not bind themselves correctly to all nodes in the table. To resolve this issue, it is recommended to utilize jQuery delegated event listener options, as demonstrated in the following example. You can also use the Visual Event bookmarklet for debugging event issues.
The suggested solution is as follows:
$('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
alert( 'You clicked on '+name+'\'s row' );
});
Although this works, my specific case required a different selector:
$('#dataTables tbody tr').on('click', 'td', function (event) {
if ($(this).attr('id') != "first" && $(this).parent().attr('data-href') !== undefined) {
document.location = $(this).parent().attr('data-href');
}
});
I am seeking guidance on how to retain the selector target while addressing this issue. Thank you.