Jquery plugins interfering with each other

Question

Note: JS/Jquery noob alert (yes, me)

There seems to be a conflict between the following two plugins:

• TableSorter (2.9.1)
• bootstrap-popover.js v2.2.1

The plugins work as they should separately, but when together, the popovers don't work. I've tried moving the calls to the popover script (and its initialization) before any other plugins, but no dice. I have a feeling the tablesorter script is somehow removing the titles from the DOM (another subject I know little about) before the popover script can load, but no dice.

In my 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

Make sure you are initializing the popover script within a document ready event.

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

If that doesn't work, I can only guess that the popover links are inside the table? If so, they are added and removed dynamically, when sorting the table, so they might need to be added through a delegated event, the code above may not work in that case.

---

Update: As stated, the popup links are within the th, which I assume are in the thead? If so, try this code:

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