JQuery .on（'click'）在DataTables第二页或11行以后没有工作

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

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 ...);