JQuery .on('click')不工作在数据表第二页或行过去11 - JQuery .on('click') not working in DataTables 2nd page or rows past 11

JQuery .on('click') not working in DataTables 2nd page or rows past 11

我有一个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();
} );

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

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

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

与此同时，我已经将on单击包装到文档中。准备好功能，然后它为我工作。

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

这里有几件事可能出错:

你的事件绑定是被替换的元素，你应该使用这样的东西:
$('#paginatedTable').on('click', '.toggleTest', function(e){
你似乎没有逃避你的html，所以数据可能会破坏它:
htmlspecialchars($arr['test2'])
(而不仅仅是$arr['test2']，也可以适用于其他变量)

我刚刚发现的另一个简单的解决方案是添加一个函数，该函数使用组件处理程序来升级任何重绘数据表的DOM。

可以这样使用:

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

当我在其中一列中使用下拉菜单时，它解决了我的分页问题。