jquery datatables multiple calls to event handler

Question

I am using jquery datatables to display some data. Each row has an edit button for which I register a click handler with live(), so that it works with pagination. I am doing it by class since I have to do it for every row. Something like: Datatables with live click event function

This works fine. But the problem happens when user does a search again and I do an ajax request to fetch a new set of results.

I just replace the existing table in the dom with a new one. Now when I click on row 1 it pops up the edit dialog for row 1. I click on row 2 it pops up the edit dialog for row 1. I click on row 2 again it pops up the edit dialog for row 2 this time.

Then I click on row 3 again and again. It pops up the edit dialog for row 2 thrice before it shows the dialog for row 3.

This keeps on increasing. I don't understand if I am replacing the entire dataTable in the div with jquery why should it register multiple events?

In case it matters, I have autoopen set to false in my dialog initializer and I explicitly open and close it.

Edit (More Details):

I am having a difficult time creating an example ... but some more detail ... I figured out that since I am using live() function to register calls across pagination the click registration mechanism exists. So when I replace the table with the same structure the click function is registered due to the first call to live(). But I make another call to live() by default and now two click events are registered. Then when I replace again three event clicks are registered. I tried overcoming this by registering events with jquery click() after checking if a click event is already registered. Helps with the multiple events part but does not register events across datatables pages.

Answer 1

Have had this issue with live and ajax. What I wound up doing is I re-registered the event clicks upon receiving an ajax response. Without an example, it's hard to recommend a solution but the idea is to attach the click events on page load using bind/click (for the default/initial display) and then re-register the click events again on a successful ajax response. Of course, placing the event-binding code in a reusable component such as a function so it can be easily called.

Answer 2

Fixed the problem

The issue was I could not just register for click event on elements within the datatable rows. The events would not be registered across datatable pages.

Using live() to register the events helped and on page change the events would be registered automatically.

But for my usecase that led to another problem every time I did a search, I would replace the datatable with a new one. The new datatable would register for those events again. So that meant multiple handlers being invoked for the same element. Because the live() function was called twice on the same class and jquery is not expected to compare whether two callback handlers are the same.

I veered in a different direction and tried to register click events using .click() in place of .live() on page change using the page event (http://datatables.net/docs/DataTables/1.9.beta.1/#page_details). This did not help since the events the page change event was invoked before the contents were refreshed with the events on the new page.

I also tried using click() instead of live() and binding click only if it had not already been registered using the example given here https://stackoverflow.com/a/6361507/161628. This technique worked across table replace but not across multiple pages.

Ultimately I found the .die() function. I invoke it before I call the live() function. The call to live() ensures that event handlers are registered on page change while the call to die() ensures I unregister live() events made previously on elements of that class. I avoid multiple calls to live() function this way.