JQuery .on('click') not working in DataTab

Question

I have a jQuery link that runs on a dynamic list for each row when the hyperlink is clicked.

This works before datatables is applied, but once datatables is applied the 11th row (after changing display to higher than the default 10) or when on another page, the jQuery is no longer called.

I tried throwing this in a jsFiddle and it works there, so I can't reproduce it in a jsFiddle for some reason.

Any pointers in the right direction would be very much appreciated.

PHP:

echo "<table id='paginatedTable'>";
echo "<thead><th>Test1</th><th>Test2</th></thead><tbody>";
foreach($array as $arr){
 echo "<tr><td>" . $arr['test1'] . "</td><td><div class='test'>";
 echo "<a href='#' class='toggleTest' data-id='". $arr['id']."' id='test-" . $arr['id'] . "'>" . $arr['test2'] . "</a>";
 echo "</div></td></tr>";
}
echo "</tbody></table>";

jQuery

$(function(){
    $('.test').on('click', '.toggleTest', function(e){
        var id = $(this).data('id');
        $("#test-"+id).html("Done");
        return false;
    });
});

$(document).ready(function() {
    $('#paginatedTable').dataTable();
} );

Answer 1

I have followed the reply from @Barmar.

along with that, i have wrapped the on click into the document.ready function, then it worked for me.

$(document).ready(function() {

$('#dmtable tbody').on( 'click', 'tr td.details-control', function () {

}
} );

Answer 2

There are a few things that can go wrong here:

• Your event binding is on elements that get replaced, you should use something like:
  $('#paginatedTable').on('click', '.toggleTest', function(e){
• You don't seem to be escaping your html so data could possibly break it:
  htmlspecialchars($arr['test2'])
  (instead of just $arr['test2'], could apply to other variables as well)

Answer 3

Another easy solution I just found is to just add a function that uses a component handler to upgrade the DOM on any DataTables redraw.

Can be used like:

$(document).ready(function(){
    var table = $('#table-1').DataTable({ 
        "fnDrawCallback": function( oSettings ) {
            componentHandler.upgradeDOM();
        }
    });
});

It solved my pagination issues when I was using a dropdown in one of the columns.

Answer 4

You need to bind the handler to a static element, not the rows that can be added dynamically. So it should be:

$("#paginatedTable").on("click", ".test .toggleTest", function ...);