Bootstrap 在 table 中悬停几次后弹出窗口停止

Question

我有一个具有动态行数的 table。我希望在悬停在每一行的某个元素上时出现一个弹出窗口。但是，当我加载页面时，弹出窗口在前几次（3-6？）次有效，然后弹出窗口完全消失。

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

这是 table 的代码。如您所见，我正在尝试将悬停时的弹出窗口应用于 table 每行第三列中的一段动态文本。当我加载页面时，这会持续一段时间。直到它……没有。

这是 jquery:

      <script>
        $(document).ready(function () {
              $('[data-toggle="popover"]').popover();
        });
  </script>

Answer 1

ng-repeat 不能很好地与 $(document).ready 配合使用，因为不能保证 $(document).ready 调用会在整个 ng-repeat 加载之前完成。

这实际上将问题从 Bootstrap 问题变成了更多的 Angular 问题（可以根据您对 ng-repeat 的使用来确定）。由于在 ng-repeat 循环结束时没有回调，您可以改用指令。

这将是您 table 行的 HTML：

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

这将是您的关联 Javascript:

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    // set your popovers per row element
  };
})

Bootstrap 在 table 中悬停几次后弹出窗口停止

Bootstrap popover stops after a few hovers in table

javascript

jquery

twitter-bootstrap

html-table

popover