0

Hi,

                                jQuery('#TheTable tr').each(function() {
                                    jQuery('td', this).slice(-1).on('click', function() {
                                       var tr = $(this).closest('tr');
                                       var row = table.row( tr );
                                       if (row.data() != undefined){
                                            modalfunc(row.data().id);
                                       }                                        
                                    });
                                });

It's working great when table is loaded but then if user enter something in searchbox and data is filtered - the event is not triggered when clicked on the column's cells. How to adapt this code to dynamically created elements?

Shaked
  • 29
  • 4
  • You need to use a delegated event handler as the `td` elements are removed from the DOM when the page changes (along with the event handler you assigned them) and new ones are added. – Rory McCrossan Dec 04 '16 at 16:39
  • Thank you Rory. I tried following the instructions but for some reason the event is now triggered on when clicking only the first row (also when filtered). this is the code I tried: $("#TheTable tbody").on("click", "td:eq(6)", function(event){ alert($(this).text()); }); – Shaked Dec 04 '16 at 17:01
  • Try just using `.on('click', 'td', ...)` and then putting an `if ($(this).index() == 6)` condition in and running your code there – Rory McCrossan Dec 04 '16 at 17:06
  • 1
    Of course.. Thank you!! – Shaked Dec 04 '16 at 17:10

0 Answers0