在表格中悬停几次后，引导弹出窗口停止

Posted 2023-05-08

【中文标题】在表格中悬停几次后，引导弹出窗口停止

【英文标题】：Bootstrap popover stops after a few hovers in table

【发布时间】：2018-02-05 03:12:08

【问题描述】：

我有一个动态行数的表。我希望在将鼠标悬停在每一行的某个元素上时出现一个弹出框。但是，当我加载页面时，弹出框会在前几次（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>

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

这里是 jquery：

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

【问题讨论】：

$('[data-toggle="popover"]').popover(); 调用后是否正在加载表格行？即使您使用的是$(document).ready，如果在调用之后正在加载行，它们不会有工具提示。

另外，请注意这里有一个错字：<tr ng-repeat="game in games.mlb>。您在标签末尾缺少"。

【参考方案1】：

ng-repeat 不适用于 $(document).ready，因为无法保证 $(document).ready 调用将在整个 ng-repeat 加载之前进行。

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

这将是您的表格行的 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
  ;
)

【讨论】：

我创建了一个没有角度和固定值的静态表，就诊断问题而言，您似乎是正确的。弹出框在等式中没有角度。

更新。我放弃了 JQuery，转而使用完整的 Angular。我没有制定自己的指令，而是使用了 Angular-UI Bootstrap (angular-ui.github.io/bootstrap) 中列出的弹出框。现在效果很好。你在这个问题上给了我线索。谢谢！