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

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

yetyet Posts: 43Questions: 17Answers: 1

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

  • john_ljohn_l Posts: 45Questions: 0Answers: 12

    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.

  • yetyet Posts: 43Questions: 17Answers: 1

    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_ljohn_l Posts: 45Questions: 0Answers: 12
    Answer ✓

    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');
    });

  • yetyet Posts: 43Questions: 17Answers: 1

    Thanks, this worked

This discussion has been closed.