当点击超链接时,我有一个jQuery链接,在每个行的动态列表上运行。
这在应用数据表之前有效,但是一旦数据表应用于第11行(在将显示更改为高于默认值10之后)或在另一页上,则不再调用jQuery。
我尝试将它放在jsFiddle中并且它可以在那里工作,所以我不能出于某种原因在jsFiddle中重现它。
非常感谢任何正确方向的指示。
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>";
$(function(){
$('.test').on('click', '.toggleTest', function(e){
var id = $(this).data('id');
$("#test-"+id).html("Done");
return false;
});
});
$(document).ready(function() {
$('#paginatedTable').dataTable();
} );
答案 0 :(得分:43)
您需要将处理程序绑定到静态元素,而不是可以动态添加的行。所以它应该是:
$("#paginatedTable").on("click", ".test .toggleTest", function ...);
答案 1 :(得分:4)
我听了@Barmar的回复。
随之而来的是,我已将on click包装到document.ready函数中,然后它对我有效。
$(document).ready(function() {
$('#dmtable tbody').on( 'click', 'tr td.details-control', function () {
}
} );
答案 2 :(得分:2)
我只是found的另一个简单解决方案是添加一个使用组件处理程序在任何DataTables重绘上升级DOM的函数。
可以像:
一样使用$(document).ready(function(){
var table = $('#table-1').DataTable({
"fnDrawCallback": function( oSettings ) {
componentHandler.upgradeDOM();
}
});
});
当我在其中一个列中使用下拉列表时,它解决了我的分页问题。
答案 3 :(得分:0)
这里有一些可能出错的地方:
$('#paginatedTable').on('click', '.toggleTest', function(e){
htmlspecialchars($arr['test2'])
$arr['test2']
,也可以应用于其他变量)