jquery datatables多次调用带有活动功能的事件处理程序 [英] jquery datatables multiple calls to event handler with live function

问题描述

我正在使用jquery数据表显示一些数据。每行都有一个编辑按钮，它为我注册了一个带有live（）的点击处理程序，这样它就可以分页。我正在上课，因为我必须为每一行做。
类似的东西：
具有实时点击事件功能的数据库

这工作正常。但是，当用户再次进行搜索时，会发生问题，并且我做了一个ajax请求来获取一组新的结果。

我只需将dom中的现有表替换为新的一个。现在当我点击第1行时，它弹出第1行的编辑对话框。我点击第2行，弹出第1行的编辑对话框。我再次点击第2行，这次弹出第2行的编辑对话框。

然后我再次点击第3行。它会在第3行的对话框显示第3行的对话框之前弹出第2行的编辑对话框。

这不断增加。我不明白，如果我用jquery替换div中的整个dataTable，为什么要注册多个事件？

如果重要，我将autoopen设置为false在我的对话框初始化程序中，我明确地打开并关闭它。

编辑（更多详细信息）：

我有一个困难的时间创造一个例子...但更多的细节...我想出，由于我使用live（）函数来注册分页上的呼叫点击注册机制存在。所以当我用相同的结构替换表时，由于首次调用live（），所以单击功能被注册。但是我默认再次打电话给live（），现在已经注册了两个点击事件。那么当我再次更换时，会注册三个事件点击。我尝试通过在检查点击事件是否已经注册后通过注册jquery click（）来克服这一点。帮助多个事件部分，但不会在数据表页面上注册事件。

解决方案

修复问题

问题是我无法在datatable行中的元素上注册click事件。事件不会在数据页面上注册。

使用live（）注册事件，页面更改将自动注册事件。

但是，对于我每次进行搜索而导致另一个问题的用例，我将用一个新的替换datatable。新的datatable将再次注册这些事件。这就意味着为同一个元素调用了多个处理程序。因为live（）函数在同一个类中被调用了两次，而且jquery不会比较两个回调处理程序是否相同。

我转向不同的方向，尝试使用页面事件（http://datatables.net/docs/DataTables/1.9.beta.1/#page_details）在页面更改时使用.click（）代替.live（）注册点击事件。这并没有帮助，因为在新页面上的事件刷新内容之前调用了页面更改事件的事件。

我还尝试使用click（）而不是live（）和绑定点击，只有当它尚未使用此处给出的示例注册时，请 http://stackoverflow.com/a/6361507 / 161628 。
这种技术在表格替换之间进行，而不是跨多个页面。

最终我发现了.die（）函数。我在调用live（）函数之前调用它。对live（）的调用确保在页面更改时注册事件处理程序，而对die（）的调用确保我取消注册先前在该类的元素上的live（）事件。我以这种方式避免多次调用live（）函数。

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.

解决方案

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 http://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.

这篇关于jquery datatables多次调用带有活动功能的事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！