[Solved] jQuery click event not working on DataTables Page 2
As a web developer, managing various data via HTML tables is a very common scenario. That is, having buttons (or other clickable elements) on each row of the table, which when clicked, triggers certain actions such as editing or deleting a record.
However, when working with tables paginated using the DataTables plugin, you may experience challenges in triggering clicks (or other events) when you navigate to the second or subsequent pages.
Example
$(function() {
$(".edit").click(function() {
// Your event handling logic here
});
});
In such a scenario, you find that on clicking the edit buttons of the rows on the first page, it works well as expected. But on navigating to the second page and onwards, these events fail to respond as expected.
By the fact that you are here, I tend to believe that you are most likely experiencing this problem with DataTables. If so, you are at the right place.
In this article, we will cover what causes this problem and how you can fix it.
The Cause
The cause of this issue can be attributed to how DataTables handles the pagination.
DataTables uses dynamic rendering, which means that only the visible rows are present in the DOM (Document Object Model) at any given time.
When you navigate to a different page, the DataTables plugin removes the visible rows from the DOM and replaces them with the new set of rows of that new page.
The problem arises because the jQuery click event handlers are attached to only the elements in the initial page load.
When the subsequent pages are loaded dynamically, the event handlers are not automatically reattached to the newly rendered elements. As a result, the click events do not fire when interacting with the elements on the second page and onwards.
Solution 1
To resolve the issue, you will need to use event delegation. Event delegation allows you to attach an event handler to a parent element that already exists in the DOM from the start and delegate the handling of the event to its child elements, even if they are added or removed dynamically.
This is achieved by the use of the jQuery on() method.
First, identify a parent element of the clickable elements in the table rows that will remain in the DOM throughout the page navigation.
This can be the table element, its parent div, or even the body element of the page. This element will be used as the selector when calling the .on() method.
In the on() method, you will pass three arguments. The first argument is the event handler (eg 'click'), the second is the selector for the target element (eg '.edit') and the third is the function with your event handling logic.
Simply change your code from this:
$(function() {
$(".edit").click(function() {
// Your event handling logic here
});
});
To be as below:
$(function() {
$("#tableID").on("click", ".edit", function() {
// Your event handling logic here
});
});
In this example, #tableID represents the ID or selector of the parent element, and .edit represents the class or selector of the clickable elements within the DataTable.
By delegating the click event to the parent element, the event handler will continue to work even when the DataTable dynamically loads new rows on different pages. The events will correctly fire for both initially rendered and newly loaded elements.
Solution 2
Another way of solving this is by adding the fnDrawCallback function inside the .dataTabale() method.
We then write all our codes for the events of the clickable elements in the table inside this Callback function. The code will work as usual with no issues (without event delegation) after the table has been paginated.
Below is the working code:
$(function() {
$("#tableID").DataTable({
"fnDrawCallback": function( oSettings ) {
//Write any code that you want to be executed after pagination
$(".edit").click(function() {
// Your event handling logic here
});
}
});
});
That's it!
By utilizing any of the two solutions in this article, you can effectively and easily fix click and other events on clickable elements from the second page and beyond in your DataTables paginated tables.
