javascript - 如果删除了父元素，则隐藏 Bootstrap Popover

Question

如果触发此弹出窗口的父元素已从 dom 中移除，您如何隐藏 Bootstrap 弹出窗口？

如果用户单击我页面上的按钮，一些内容将通过ajax 加载到div 中。下次单击不同的按钮时，另一个 ajax 调用将替换同一个 div 中的内容。

加载到此 div 中的内容包含充当 Bootstrap Popover 触发器的元素，如下所示:

<a class="infolink" data-toggle="popover" data-title="some title" data-placement="bottom" data-trigger="hover click" ></a>

弹出窗口在每次成功的 ajax 调用后被初始化:

$(document).ajaxSuccess(function(){
           var init = function() {
                $('[data-toggle="popover"]').each(function(index) {
                    initPopover(this); //This is where the popover gets initialized
                });
            }
            window.setTimeout(init,100); // set timeout to prevent function from being executed before content is replaced
       });

ajax 调用后的问题是，如果弹出窗口是可见的，即使父元素已被移除，它仍保持可见。根据谷歌搜索结果，这对于弹出窗口或对话框来说并不是一个不常见的问题，但到目前为止我遇到的解决方案对我来说似乎不是很干净。

两种解决方案，仅举几例:
一旦 ajax 成功完成，隐藏每个弹出窗口。这不是一个选项，因为我的弹出窗口的内容在打开后通过 ajax 动态加载。

有一个数组存储所有触发元素。一旦 Ajax 成功事件发生，遍历该数组并检查该元素是否仍然存在。

//Pseudocode
var popoverTriggers = [];
$('[data-toggle="popover"]').each(function(index) {
    popoverTriggers.push(this);
}

在我看来也不是很干净。

有谁知道更好的方法吗？

Answer 1

我加了一个

$('.popover').remove();

到应该触发移除弹出窗口的事件。这对我很有用。