Question

使用bootstrap popovers时，你必须在你的javascript代码中初始化它们，如$('#element').popover();。通常你会使用$(document).ready();函数。但是如果弹出窗口绑定的元素是由ajax本身加载的呢？

对javascript没有完全的信心，我面临的当前问题是有一个页面通过多个ajax调用加载了大部分内容。其中一个要素是：

<span class="infolink" style="vertical-align:bottom;"  data-title="some title" data-placement="bottom" data-delay="500" data-content="some content"> 
Trigger Popover 
</span>

在每个ajax调用循环遍历所有元素并初始化popover之后，我想到了一个解决方案（例如：$('.infolink').each(function(i,e){e.popover();});）。我不想这样做，因为这会影响性能，因为ajax调用次数和页面大小。还有其他办法吗？

另一个想法是拥有一个函数（例如function initializePopover(element){...}）并在元素加载<span class="infolink" [...] onload="initializePopover(this)"></span>后调用它。但这也不起作用。

是否有最佳实践来初始化由ajax加载trigger-element本身的popovers？

Answer 1

使用jQuery的event delegation机制来捕获以异步方式加载的元素：

让我们说从AJAX调用加载以下html：

<span class="infolink" style="vertical-align:bottom;"  data-title="some title" data-placement="bottom" data-delay="500" data-content="some content"> 
Trigger Popover 
</span>

您的绑定将如下所示：

$(document).on("click", ".infolink", function(e) {
    $(e.target).popover();
});

这基本上是以下逻辑的别名：

点击document元素（基本上无处不在）
检查点击是否来自＆＃34; .infolinks＆＃34;
如果确实 - 发送事件回调

以这种方式，即使元素稍后出现 - 您仍然可以将事件回调绑定到它。

Answer 2

您有两个解决方案：https://stackoverflow.com/a/11947156/2660794您可以选择适合您的解决方案..

Answer 3

我认为最好的方法是在你的ajax调用完成后添加一个

$('.infolink').popover();

你不需要循环。

元素由ajax加载后初始化bootstrap popover

3 个答案: