jQuery event within columnDefs render

tjm1987

Hi there,

I'm running into an issue (of my own creation!) where a jQuery toggle event (show/hide extra details) works on the initial load, but subsequent draws of the table (search/filter) stops it from functioning.

Code is:

"columnDefs": [

{ "targets": 1,
      
      "render": function ( data, type, row ) 
    { 
        if (row[1] === 'England') {
                jQuery('.expand').on('click', function () {
                 jQuery(this).closest('td') 
                .find('.region-deets')
                .toggle();
                
}); 

      return 'England'+' '+'<img class="expand" class="eng-info" src="/images/details_open.png" />'+'<p class="region-deets">'+row[2]+'</p>';}
      
      else {
          return row[1];}
    }
      
      }, ]

Is the inclusion within 'render' the source of the issue, or could anyone advise a fix? jQuery not my strongest suit!

Many thanks, Tom.