How to bind click events on rows hidden by search (with stateSave)

sronsiek

I have many tables with click-events, which are typically added in the DT initComplete callback.
This has been working fine, until I introduced stateSave: true. Now, when I enter some search text, navigate to a different, then return to the previous page, the search state has been preserved & only the rows which match the search are rendered. I'm seeing an unfortunate side-effect of this - in that only the rendered rows receive their bind events. When I remove the search text, the previously hidden rows do not have their bind events.

Curiously, this is not happening in this example table https://datatables.net/examples/api/row_details_stateSave.html although I'm using the same column-className config and jquery selectors when binding click events.

I see 2 options:
* Bind to the search.dt or keyup on search-box events to allow me to-re-bind to newly unhidden rows as the search text is changed
* Somehow modify the selector on my bind following initComplete to include all rows

I know how to implement the first of these, but my preference would be the second solution as it will be less code and more importantly, more efficient - I'd anticipate quite a loss in responsiveness when re-binding on thousands of elements on every search-keystroke.

So the question is: how can i magically include the hidden rows in my selector in initComplete ?

     "columns": [
        { "title": "Template 'Id' - Hidden" },
        { "title": "",      // Expand / collapse icon
          "className": "dt-control",  // Binding expand/collapse to this class does not include rows hidden by search!
           ...

       j( '#data_table' ).find( 'td.dt-control').on( 'click', function () {

Any hints welcome!

kthorngren

It doesn't need to be in initComplete but use delegated events like this example.

Kevin

sronsiek

Thanks @Kevin - I just came across that:

Replacing:

       $( selector ).find( 'td.dt-control').on( 'click', function () {

with this does the magic:

      $( selector ).on('click', 'td.dt-control img', function (ev) {

So, thanks for hint & off to the read up on jquery events I guess