click event handler not working for elements on page 2 or higher
click event handler not working for elements on page 2 or higher
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?
This question has an accepted answers - jump to answer
Answers
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.
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.
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');
});
Thanks, this worked