使用分页时，只有 table 的第一页是可点击的 - List.js

Question

我正在使用 list.js 搜索和分页，其中 table 包含 200 多行。我有一个单击事件，如果单击一行并调出一个模式，就会触发该事件。问题是此点击事件仅针对 table 分页时第一页上的行触发。

    var testList = new List('test-list', {
    valueNames: ['division', 'region', 'location', 'name'],
    page: 10000,
    plugins: [ListPagination({})]
    });

当我将页数限制设置为 10000 时，我可以单击所有行，因为它们位于第一页上，但如果我将页数限制设置为 50，则只有第一页上的行可以单击。我在每一行中都有按钮，这些按钮也只能在第一页上点击。

我试着用最简单的代码笔来显示这个：

http://codepen.io/cavanflynn/pen/jPvEvB

只有在第一页的列表项被点击时才会弹出警告，而不会弹出任何后续页面。

有没有人知道会发生什么或者可以想出一些解决方法？谢谢！

Answer 1

既然你一直在使用 jQuery，为什么不用这样的东西呢？

$('#test-list').on('click', 'li', function() { alert("These work, but the rest don't :(") })

根据您的评论进行编辑：

来自 jQuery 文档：

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on().
...
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

所以你想要做的是 select table 本身，然后在 .on() select 里面你想要触发事件的事件和元素。

使用分页时，只有 table 的第一页是可点击的 - List.js

Only first page of table is clickable when using pagination - List.js

html

javascript

css

jquery

jquery-plugins