单击(‘JQuery’)在第2页或超过11行的DataTables中无效
单击(‘JQuery’)在第2页或超过11行的DataTables中无效
提问于 2014-08-21 05:30:30
我有一个jQuery链接，当单击超链接时，它在动态列表上为每一行运行。
这在应用datatables之前有效，但是一旦datatables应用到第11行(在将display更改为高于默认值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();
} );回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-21 05:37:29
您需要将处理程序绑定到静态元素，而不是可以动态添加的行。所以它应该是：
$("#paginatedTable").on("click", ".test .toggleTest", function ...);Stack Overflow用户
发布于 2016-03-22 20:16:03
我关注了@Barmar的回复。
除此之外，我还将单击操作封装到document.ready函数中，然后它就对我起作用了。
$(document).ready(function() {
$('#dmtable tbody').on( 'click', 'tr td.details-control', function () {
}
} );Stack Overflow用户
发布于 2017-01-13 00:19:47
另一个简单的解决方案我只是found，就是添加一个函数，该函数使用组件处理程序在任何DataTables重绘时升级DOM。
可以像这样使用：
$(document).ready(function(){
var table = $('#table-1').DataTable({
"fnDrawCallback": function( oSettings ) {
componentHandler.upgradeDOM();
}
});
});它解决了我在其中一列中使用下拉列表时的分页问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25414778
复制相关文章
相似问题