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

Question

I am using list.js search and pagination with a table that contains over 200 rows. I have a click event that fires if a row is clicked and brings up a modal. The problem is that this click event is only firing for the rows on the first page of the table when paginated.

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

When I have the page limit set to 10000 then I can click all of the rows because they are on the first page, but if I set the page limit to 50 then only the rows on the first page are clickable. I have buttons in each row that are only clickable when on the first page as well.

I tried to make the simplest codepen possible to display this:

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

An alert pops up only when the list items on the first page are clicked, but not any of the subsequent pages.

Does anybody know what could be going or could think of some workarounds? Thanks!

Answer 1

Since you're using jQuery anyways, why not something like this?

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

Edit in response to your comment:

From the jQuery documentation:

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.

So what you want to do is select the table itself, then inside .on() select what event and element you want to trigger the event on.