sr87 sr87 - 6 months ago 28
jQuery Question

Bootstrap popover stops after a few hovers in table

I have a table with a dynamic number of rows. I would like to have a popover appear on hover over a certain element of each row. However, when I load the page, the popover works for the first few (3-6?) times, and then the popover disappears altogether.

<div class="container">
<table class="table" style="width:20%">
<tr ng-repeat="game in">
{{ game.awayTeam }} <br> {{ game.homeTeam }}
{{ game.awayScore }} <br> {{ game.homeScore }}
<span data-toggle="popover"
data-content="Some content"
style="float: right"> {{ game.status}} </span>

This is the code for the table. As you can see, I'm trying to apply the popover on hover to a dynamic piece of text in the third column of each row of my table. When I load the page, this works for a while. Until it just... doesn't.

Here is the jquery:

$(document).ready(function () {

Answer Source

ng-repeat doesn't work well with $(document).ready, since there's no guarantee that the $(document).ready call will be before the entire ng-repeat is loaded.

This actually turns the question into more of an Angular question (which can be determined from your use of ng-repeat) from a Bootstrap question. Since there's no callback at the end of a ng-repeat loop, you could use directives instead.

This would be the HTML for your table row:

<tr ng-repeat="game in" my-repeat-directive>
  <!-- things go here -->

And this would be your associated Javascript:

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    // set your popovers per row element
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download