JQuery .on('click')不工作在数据表第二页或行过去11
JQuery .on('click') not working in DataTables 2nd page or rows past 11
我有一个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的回复。
与此同时,我已经将on单击包装到文档中。准备好功能,然后它为我工作。
$(document).ready(function() {
$('#dmtable tbody').on( 'click', 'tr td.details-control', function () {
}
} );
这里有几件事可能出错:
- 你的事件绑定是被替换的元素,你应该使用这样的东西:
$('#paginatedTable').on('click', '.toggleTest', function(e){
- 你似乎没有逃避你的html,所以数据可能会破坏它:
htmlspecialchars($arr['test2'])
(而不仅仅是$arr['test2']
,也可以适用于其他变量)
我刚刚发现的另一个简单的解决方案是添加一个函数,该函数使用组件处理程序来升级任何重绘数据表的DOM。
可以这样使用:
$(document).ready(function(){
var table = $('#table-1').DataTable({
"fnDrawCallback": function( oSettings ) {
componentHandler.upgradeDOM();
}
});
});
当我在其中一列中使用下拉菜单时,它解决了我的分页问题。
相关文章:
- 在<页眉>标签
- 使用javascript将动态表从一个html页面打印到另一个html页
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 浮动页脚栏-使用Bootstrap隐藏
- 如何通过引用var Using DataTables来进行分页或排序
- 如何获取不属于我项目的上一页的URL
- 如何处理10页以上的静态页眉/页脚
- 如何在Facebook上的iframe应用程序中使后退按钮返回到上一页
- 当单击第一个李时,它显示内容一,当单击第二个李时,它显示内容二
- 使用CSS或JavaScript计算分页符的数量
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- primefaces日历可以禁用过去的日期和时间吗
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- 打印预览没有应用程序页眉和页脚的html表格
- Javascript袖珍参考,第121页:这是怎么回事;猴子补丁”;方法应该有效
- DataTables-创建自定义分页样式(加载更多样式)
- 带有url的单页网站导航
- JQuery .on('click')不工作在数据表第二页或行过去11
- 如何运行“加二”;图像幻灯片放映”;在一页上