click event handler not working for elements on page 2 or higher

yet

I am attaching an event handler using on() to each <span class="toggler">Toggle</span> of a row.
The event handler is triggered for all clicks on row elements of the first page 1 of the data. However when I choose "Next" or page 2 then the click handler is never triggered. The original data is rendered statically into a table and then turned into a DataTable. How can it be that all other rows expect the ones on page 1 forget about their click event handler?

john_l

Usually I'd expect to see that happening if you were simply setting up the event handler after table initialization using a selector that picks out the 'toggler' spans currently in the DOM, but you are correctly using 'on', so in theory, it should work.

I suspect there is something wrong with the way you are setting up the event handler, but without more details there isn't much else I can suggest, except that you double check the handler setup, and try debugging through the code in Firebug or similar. You could also try posting a (non-)working example for people to play with.

yet

See here

http://jsfiddle.net/user0815/zhkLx8be/

Clicking on "toggle me" pops up an alert() for all items of the first batch but it does not for items on further batches.

john_l

Yes, it's the click handler that's the problem - you are only binding it to any .toggler spans that are present in the DOM when you set it up. You need to attach it to something higher up in the DOM tree that will remain present when the table page is changed. This should work:

$('#table_id').on('click', '.toggler', function() {
alert('toggled');
});

yet

Thanks, this worked