JQuery .on('click') 在 DataTables 第二页或超过 11 的行中不起作用

Posted 2023-02-24

【中文标题】JQuery .on(\'click\') 在 DataTables 第二页或超过 11 的行中不起作用

【英文标题】：JQuery .on('click') not working in DataTables 2nd page or rows past 11JQuery .on('click') 在 DataTables 第二页或超过 11 的行中不起作用

【发布时间】：2014-10-14 09:42:56

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

成功了，我认为它必须是父元素，但任何包装它的静态元素似乎都可以工作！万分感谢。计时器允许时我会接受答案

我认为悬停是一样的，但我正在努力解决它。有什么建议吗？

悬停很特别，因为它不是一个真正的事件。它只是在一个地方为mouseenter 和mouseleave 定义处理程序的简写。使用.on 时，您必须明确执行此操作。

mouseenter 和 mouseleave 在不同的功能中运行良好。再次感谢！

谢谢。为我工作。

【参考方案2】：

我已关注@Barmar 的回复。

除此之外，我将 on click 包装到 document.ready 函数中，然后它对我有用。

$(document).ready(function() 

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


 );

【参考方案3】：

这里可能会出错：

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

【参考方案4】：

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

可以像这样使用：

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

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

【讨论】：

我不确定为什么没有对此投票。这个解决方案对我有用。

它不工作给出错误 Uncaught ReferenceError: componentHandler is not defined

@MohneeshAgrawal - ComponenHandler 只是示例。您可以调用自己的函数。请注意，大卫哈根的回答是有效的。