tablesorter - Jquery 插件相互干扰

Question

注意:JS/Jquery noob 警报(是的，我)

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

• 表格排序器 (2.9.1)
• bootstrap-popover.js v2.2.1

这些插件可以单独使用，但放在一起时，弹出框就不起作用了。我试过在任何其他插件之前将调用移动到 popover 脚本(及其初始化)，但没有骰子。我感觉 tablesorter 脚本在 popover 脚本可以加载之前以某种方式从 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

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

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

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

---

更新:如前所述，弹出链接在 th 中，我假设它在 thead 中？如果是这样，试试这个代码:

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