我有一个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();
} );
发布于 2014-08-21 05:37:29
您需要将处理程序绑定到静态元素,而不是可以动态添加的行。所以它应该是:
$("#paginatedTable").on("click", ".test .toggleTest", function ...);
发布于 2016-03-22 20:16:03
我关注了@Barmar的回复。
除此之外,我还将单击操作封装到document.ready函数中,然后它就对我起作用了。
$(document).ready(function() {
$('#dmtable tbody').on( 'click', 'tr td.details-control', function () {
}
} );
发布于 2017-01-13 00:19:47
另一个简单的解决方案我只是found,就是添加一个函数,该函数使用组件处理程序在任何DataTables重绘时升级DOM。
可以像这样使用:
$(document).ready(function(){
var table = $('#table-1').DataTable({
"fnDrawCallback": function( oSettings ) {
componentHandler.upgradeDOM();
}
});
});
它解决了我在其中一列中使用下拉列表时的分页问题。
https://stackoverflow.com/questions/25414778
复制相似问题