悬停时弹出窗口在数据表的第二页上不起作用

Posted

技术标签:

【中文标题】悬停时弹出窗口在数据表的第二页上不起作用【英文标题】:popover on hover not working on second page of datatable 【发布时间】:2016-07-22 03:20:04 【问题描述】:

我动态添加了一栏的内容...

 for (var i = 0; i < data.length; i++) 
   data.referred_by='<a href="#" data-toggle="popover" class="" title="'+temp[i].referred_by+'"data-trigger="hover" data-content="Total Referrals :'+temp[i].as_count+'">'+temp[i].referred_by+'</a>'
 

以下代码用于创建数据表

$('#datatable4').dataTable(
  'paging':   true,  // Table pagination
  'ordering': true,  // Column ordering 
  'info':     true,  // Bottom left status text
  "aaData" : data,

  aoColumns: [
     mData: 'index' ,
     mData: 'patient_name' ,
     mData: 'age' ,
     mData: 'gender' ,
     mData: 'mobile_no' ,
     mData: 'email_id' ,
     mData: 'request_status' ,
     mData: 'referred_by' ,
     mData: 'ref_to_img',
     mData: 'ref_by_img'
  ]

在准备好的功能中我添加了

 $('[data-toggle="popover"]').popover();

但在数据表中,只有在悬停时的第一页弹出框正在工作......而在第二页之后它不起作用......有什么解决方案吗?

【问题讨论】:

能否包含您的 html?进一步的背景可能会有所帮助。考虑使用jsfiddle.net 设置演示 【参考方案1】:

每次重绘数据表时,您都需要重新初始化弹出框。 $('[data-toggle="popover"]').popover() 只会初始化那些在代码执行时可见的弹出框,而不是例如第 2 页中的弹出框。在drawCallback() 回调中执行popover() 代替:

$('#datatable4').dataTable(
  ...
  drawCallback: function() 
    $('[data-toggle="popover"]').popover();
    
)

【讨论】:

不适用于drawCallback:function() $('[data-toggle="tooltip"]').tooltip(); 如果您的工具提示元素中包含data-toggle="tooltip"@WahyuKodar $('[data-toggle="tooltip"]').tooltip() 肯定会起作用。

以上是关于悬停时弹出窗口在数据表的第二页上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

jquery函数在表的第二页上不起作用[重复]

边距在第二页上不起作用

为啥 onclick 在 Rails4 和 coffeescript 中的 turbolinks 的第二页请求上不起作用?

在 DataTables 的第二页中添加行后,操作事件不起作用

复选框单击事件在数据表的第二页不起作用?

jquery悬停在我的列表项上不起作用