JQuery .on('click') not working in DataTables 2nd page or rows past 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 ...);