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

Posted 2023-05-08

【中文标题】如果删除了父元素，则隐藏 Bootstrap Popover

【英文标题】：Hide Bootstrap Popover if parent element is removed

【发布时间】：2017-07-22 07:39:43

【问题描述】：

如果触发此弹出窗口的父元素从 dom 中删除，您如何隐藏引导弹出窗口？

如果用户点击我页面上的按钮，一些内容将通过 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);

对我来说也不是很干净。

有人知道更好的方法吗？

【问题讨论】：

How to dismiss a Twitter Bootstrap popover by clicking outside?的可能重复

【参考方案1】：

我加了一个

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

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