Bootstrap 弹出窗口在第二次加载时起作用

Question

我用 bootstrap 在 Sharepoint 上制作了一个网页，内容填充了 javascript。我在 table 中使用弹出窗口。 table 是通过 javascript 生成的。奇怪的是，弹出窗口只有在我用 F5 刷新 page/reloaded 后才起作用。

table 之外的弹出窗口在第一次加载时工作正常。代码在我的本地机器上运行良好，没有问题，但在共享点上它崩溃了。

这里是一些代码——初始化：

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

然后调用生成table的函数：

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

随后是 popper 调用：

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

结果是 table，其中包含以下带有 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 文件加载的，因此不知道代码的加载顺序。

因此建议将html文件中的javascript函数放入javascript文件中的显式函数中。然后必须显式调用该函数。

Javascript 文件:

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

在 HTML 中，加载是通过以下方式完成的：

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

Bootstrap 弹出窗口在第二次加载时起作用

Bootstrap popover works on second load

javascript

sharepoint

bootstrap-4

popper.js