Question

如果从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调用后，popovers都会被初始化：

$(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成功完成，就隐藏每个popover。这不是一个选项，因为我的popover的内容一旦打开就会通过ajax动态加载。

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

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

对我来说也不是很干净。

有谁知道更好的方法吗？

Answer 1

我添加了

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

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

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

1 个答案: