Warm tip: This article is reproduced from serverfault.com, please click

javascript-Bootstrap Popover在第二次加载时起作用

(javascript - Bootstrap popover works on second load)

发布于 2020-11-27 19:42:30

我已经使用引导程序在Sharepoint上制作了一个网页,并且内容使用javascript填充。我在表中使用弹出框。该表是通过javascript生成的。奇怪的是,弹出窗口仅在刷新页面/用F5重新加载后才起作用。

表格外的弹出式窗口在第一次加载时工作正常。代码在我的本地计算机上运行正常,没有问题,但是在共享点上,它崩溃了。

这里是一些代码-初始化:

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

然后生成表的函数称为:

<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上起作用。

Questioner
kingbrain
Viewed
0
kingbrain 2020-12-01 14:28:08

问题是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();">