在元素被 ajax 加载后初始化 bootstrap popover

Question

使用引导弹出窗口时，您必须像这样在您的 javascript 代码中初始化它们$('#element').popover();。通常你会为此使用一个$(document).ready();函数。但是如果 popover 绑定到的元素是由 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 调用循环遍历所有元素并初始化弹出窗口（例如：）之后$('.infolink').each(function(i,e){e.popover();});。我不想这样做，因为考虑到 ajax 调用的数量和页面的大小，这会损害性能。有没有其他办法？

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

是否有关于如何初始化弹出窗口的最佳实践，其中触发元素本身将由 ajax 加载？

Answer 1

使用 jQuery 的事件委托机制来捕获以异步方式加载的元素：

假设以下 html 是从 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>

您的绑定将如下所示：

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

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

1. 单击document元素时（基本上无处不在）
2. 检查点击是否从“.infolinks”冒泡
3. 如果确实如此 - 调度事件回调

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