Question

注意：JS / Jquery noob alert（是的，我）

以下两个插件之间似乎存在冲突：

TableSorter（2.9.1）
bootstrap-popover.js v2.2.1

插件可以单独工作，但是当它们在一起时，弹出窗口不起作用。我尝试在任何其他插件之前将调用移动到popover脚本（及其初始化），但没有骰子。我有一种感觉，在popover脚本可以加载之前，tablesorter脚本以某种方式从DOM中移除标题（我知道的另一个主题），但没有骰子。

在我的HTML

中

<script src="../../js/jquery-1.8.2.min.js"></script>
<script src="../../js/jquery.tablesorter.js"></script> 
<script src="../../js/jquery.tablesorter.pager.js"></script> 
<script src="../../js/tooltips-popovers.js"></script>
<script>
 $(function(){
     $("#stats").tablesorter();
 });
</script>
<script>
    $("a[rel=popover]").popover({html:true,trigger:'hover'});
</script>
<script>     /* Initiate pager  */      
    $(function(){
    var pagerOptions = {
        container: $(".pager"),   
        };
    $("table")
    .tablesorterPager(pagerOptions);
    });
</script>

Answer 1

确保在文档就绪事件中初始化popover脚本。

$(function(){
  $("a[rel=popover]").popover({html:true,trigger:'hover'});
  $("#stats")
    .tablesorter()
    .tablesorterPager({
      container: $(".pager")
    })
});

如果这不起作用，我只能猜测弹出链接在表格内？如果是这样，在对表进行排序时会动态添加和删除它们，因此可能需要通过委托事件添加它们，上面的代码在这种情况下可能不起作用。

更新：如上所述，弹出链接在th范围内，我假设它位于thead？如果是这样，请尝试以下代码：

$(function(){
  $("#stats")
    .tablesorter({
      initialized: function(table){
        $("a[rel=popover]").popover({html:true,trigger:'hover'});
      }
     })
    .tablesorterPager({
      container: $(".pager")
    })
});

Jquery插件相互干扰

在我的HTML

1 个答案: