jQuery .on（’click’）在DataTables第2页或第11行之后不起作用|jquery问答

当单击超链接时，我有一个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的回复。

随之而来的是，我将单击包装到document.ready函数中，然后对我有用。

$(document).ready(function() {

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

}
} );

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

可以像这样使用：

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

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

这里有些事情可能会出错：

您的事件绑定位于要替换的元素上，您应该使用类似以下内容的东西：
$('#paginatedTable').on('click', '.toggleTest', function(e){
您似乎没有在转义html，因此数据可能会破坏它：（
htmlspecialchars($arr['test2'])
而不是just $arr['test2']，它也可以应用于其他变量）

本文地址：http://jquery.askforanswer.com/jquery-onclickzaidatatablesdi2yehuodi11xingzhihoubuqizuoyong.html
文章标签：datatables , html , javascript , jquery , php
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

PHP：

jQuery的

文件下载