在表格中有幾個懸停後，Bootstrap彈出窗口停止

我有一個具有動態行數的表格。我希望將鼠標懸停在每行的某個元素上方。但是，當我加載頁面時，popover會在前幾（3-6？）次運行，然後Popover完全消失。在表格中有幾個懸停後，Bootstrap彈出窗口停止

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

來源

2017-08-27 sr87

是'$（'[後被裝在表中的行數據 - toggle =「popover」]'）。popover（）;'call？即使你使用'$（document）.ready'，如果在調用之後正在加載行，它們將不會有工具提示。 –

另外，請注意，您在這裏有一個錯字：'中的遊戲，您在標籤末尾缺少一個''''。 –

ng-repeat不$(document).ready很好地工作，因爲沒有保證的$(document).ready通話將被加載整個ng-repeat之前。

這實際上將問題轉化爲更多的一個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 
    }; 
})

來源

2017-08-27 20:40:38

我已經創建了一個沒有角度和固定值的靜態表格，並且就診斷問題而言，您看起來是正確的。這個popover在方程中沒有角度。 – sr87

更新。我拋棄了JQuery，而是改用了Angular。我不使用自己的指令，而是使用Angular-UI Bootstrap（https://angular-ui.github.io/bootstrap/）中列出的popovers。它現在效果很好。你在這個問題上暗示了我。謝謝！ – sr87

在表格中有幾個懸停後，Bootstrap彈出窗口停止

回答

相關問題