Bootstrap popover 在第二次加載時工作

Question

我用引導程序在 Sharepoint 上制作了一個網頁，內容填充了 javascript。 我在表格中使用彈出框。 該表是通過 javascript 生成的。 奇怪的是，只有在我刷新頁面/使用 F5 重新加載它之后，彈出框才起作用。

表格外的彈出框工作正常，並且在第一次加載時工作。 以及代碼在我的本地機器上運行良好，沒有問題，但在 sharepoint 上它崩潰了。

這里有一些代碼 - 初始化：

<script src="jquery-3.5.1.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

然后調用生成表的 function ：

<body onload="javascript: GenerateTable();">

然后是 popper 調用：

$(function () {
  $('.example-popover').popover({
  })
})

結果是一個表，其中包含帶有 popper 的以下行：

<td>Here is a question which needs a popper as info!&nbsp;&nbsp;
<div class="row justify-content-end">       
<a href="#!" tabindex="0" class="badge badge-info" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="This is a funny popover" title="Info">Info</a>
</div>
</td>

在我看來，這是加載順序的問題——但無法弄清楚為什么它在本地工作，但在 Sharepoint 上卻不行。

Answer 1

我從 CDN 導入 js，它在我的環境中運行良好。 測試代碼供您參考：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body >
  <td>Here is a question which needs a popper as info!&nbsp;&nbsp;
    <div class="row justify-content-end">       
    <a href="#!" tabindex="0" class="badge badge-info" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="This is a funny popover" title="Info" data-placement="right">Info</a>
    </div>
    </td>
    
</body>
<script>

$(function () {
  $('.badge').popover();
 
})
</script>

測試結果：

如果您需要進一步的幫助，請分享完整代碼。

Answer 2

問題在於 javascript 的執行順序。 由於代碼是從外部 javascript 文件加載的，因此加載代碼的順序是未知的。

Thus it is recommended to put the javascript function from the html file into an explicit function into the javascript file. 然后必須顯式調用 function。

Javascript 文件：

function PopperCall(){
$('.example-popover').popover({});
$('.popover-dismiss').popover({trigger: 'focus'});
$('[data-toggle="popover"]').popover();
}

在 HTML 中，加載通過以下方式完成：

<body onload="javascript: GenerateTable(); PopperCall();">

Bootstrap popover 在第二次加載時工作

問題描述

2 個解決方案

解決方案1
0 2020-11-30 07:49:45

解決方案2
0 已采納 2020-12-01 06:28:08

Bootstrap popover 在第二次加載時工作

問題描述

2 個解決方案

解決方案1 0 2020-11-30 07:49:45

解決方案2 0 已采納 2020-12-01 06:28:08

解決方案1
0 2020-11-30 07:49:45

解決方案2
0 已采納 2020-12-01 06:28:08