JQuery .on('click') 在 DataTables 2nd page 或 11 之后的行中不起作用

2022-01-01 00:00:00 datatables jquery php javascript html

我有一个 jQuery 链接，当点击超链接时，它会在每一行的动态列表上运行.

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

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

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.

我尝试将它放入 jsFiddle 并且它在那里工作，因此由于某种原因我无法在 jsFiddle 中重现它.

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.

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();
} );

推荐答案

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

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

相关文章