JQuery .on('click')不在DataTables第二页或11行以上

Question

我有一个jQuery链接,当单击超链接时,每个行都在动态列表上运行.

这在数据表格应用之前有效,但是一旦数据表应用于第11行(在将显示更改为高于默认值10之后)或者在另一页面上,则不再调用jQuery.

我尝试在jsFiddle中抛出它并且它在那里工作,所以我不能出于某种原因在jsFiddle中重现它.

任何指向正确方向的人都会非常感激.

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

您需要将处理程序绑定到静态元素,而不是可以动态添加的行.所以它应该是:

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

Answer 2

我已经关注了@Barmar 的回复。

与此同时，我已经将点击包装到 document.ready 函数中，然后它对我有用。

$(document).ready(function() {

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

}
} );