Event Listeners not working for contents in Next Page

sajjanbh

Hello there,
I've been developing a web application which displays database entries through DataTable. Within DataTable, I've got various user options/actions on each row, which are controlled by my Jquery event listeners. Upon testing these event listeners, they work correctly for the rows displayed initially on the first page. However, on the rows in next page, the event listeners don't work. Is there anyway that I can make my event listeners work throughout my entire DataTable? I've already tried calling DataTable from $(document).ready() and also after creating my HTML table, but none worked.

Thanks in advance!

persona

You have many options for do this:

• If you set event listeners with a class name or similar, do it with jquery and live function (it's deprecated on new versions, check the new way to do this).

• Add the event listeners again after load data callbacks (drawCallback for example)

• Add event listeners in the createdCell callback searching for your buttons.

• Add event listener in the rowCallbach searching for your buttons.

allan

The best way is to use a delegated event handler. See the second top FAQ: Q. My events don't work on the second page.

Allan

alderhernandez

hi sajjanbh I had the same problem before
but I solved it by specifying the exact id that contains the item you want to use for example:

$('#tbArticulos_wrapper').on('click', '.paginate_button', function () { alert("'You clicked on") });

need to specify the parent container (id or class name)

sajjanbh

Thank you Persona, Allan and Alderhernadez for your suggestions. All of your suggestions have helped me to solve my problem.

It seems to me that Datatables replaces the table rows with new ones when navigating to another page (actually it makes sense as well). So, when I earlier applied my event listeners using <a> elements inside my <td>, it didn't work, as the newly added <tr>'s didn't exist in the DOM. However, when I applied my event listeners based on the $('table tbody') (since tbody does exist in DOM) as per your suggestions, and then passed my <a> elements as parameter to on() function, it worked.

Just for reference to someone facing similar issue, my earlier incorrect DOM selector was like:
$('a.view-detail').on('click', function(){});

Now, my working DOM selector is like:
$('table#datatable tbody').on('click', 'tr td a.view-detail', function(){});

And this works as expected.

Thank you all for your help!

allan

It seems to me that Datatables replaces the table rows with new ones when navigating to another page (actually it makes sense as well).

If you are using server-side processing, yes. If you are using client-side processing, then no - it reuses existing rows (although obviously if it needs to display new rows it will create new rows).

Good to hear it works for you. Delegated events are the way forward.

Allan