Question

我有一个使用Backbone的单页应用程序，每当我翻过某些内容然后点击＆＃34;返回＆＃34;按钮，popover永远停留。

我想在加载新实例时销毁所有popover实例。

Answer 1

查找通过数据API创建的弹出窗口并不困难，并且已经在David Mulder和Amir Popovich等其他答案中得到了解决。你这样做：

$("[data-toggle='popover']").popover('hide');

或者，如果您需要或愿意，可以使用destroy。

挑战在于处理那些动态创建的popovers。

用弹出窗口标记元素

我会实现这样的事情。我会覆盖默认的popover方法，并且我会尝试尽早执行此覆盖，以便需要弹出窗口的所有使用我的覆盖。它的作用就是标记使用带有类的弹出窗口的元素。 Bootstrap不会自己标记它们：

// Override popover so as to mark everything that uses a popover.
var old_popover = $.fn.popover;
function my_popover() {
  this.addClass('marked-as-having-a-popover');
  return old_popover.apply(this, arguments);
}
$.fn.popover = my_popover;

然后在卸载前清除所有内容，我会输入检测到卸载以下内容的代码：

$(".marked-as-having-a-popover").popover('hide');

如果测试显示它对您的用例更有效，则可以使用destroy而不是hide。

现在，如果覆盖发生得足够早并且您没有加载多个jQuery的页面，则上面的方法将工作。（是的，这是可能的。）我在我的一个应用程序中使用类似处理工具提示的东西，所以我知道原理是合理的。碰巧在我的应用程序中，所有工具提示都是由我的代码创建的，因此不存在丢失内容的风险。

使用弹出窗口找到所有元素，甚至没有标记

如果您处于可以创建弹出窗口但未标记的情况下（我将其称为“escapee”），则需要查询整个DOM并查找哪些元素具有弹出窗口。这里没有捷径。您不能依赖data-content之类的属性，因为可以完全动态创建弹出窗口（即没有任何data-属性）。此外，所有类型的元素都可以获得弹出窗口，因此您无法可靠地假设只有button个元素会有弹出窗口。找到需要处理的所有内容的唯一可靠方法是查看DOM中的每个元素并检查它是否有弹出窗口：

// Obviously this is quite expensive but in a situation where there *can* be escapees
// then you have to check all elements to see if they have a popover.
$("*").each(function () {
    // Bootstrap sets a data field with key `bs.popover` on elements that have a popover.
    // Note that there is no corresponding **HTML attribute** on the elements so we cannot
    // perform a search by attribute.
    var popover = $.data(this, "bs.popover");
    if (popover)
        $(this).popover('hide');
});

同样，可以使用destroy而不是hide。

概念证明

这是一个fiddle，它说明了整个事情：

“添加动态弹出窗口”模拟在覆盖生效时添加弹出窗口的代码。
“添加Escapee”模拟可添加弹出框并以某种方式设法使用原始Bootstrap代码的代码。
“Clear Marked”仅清除标记的popovers。
“全部清除”清除标记或不标记的每一个弹出窗口。

Answer 2

它很简单，只需要调用一个带有参数“destroy”的函数popover（）来销毁popover。它将销毁由$（“[data-toggle = popover]”）创建的所有弹出窗口.popover（）;

您可以查看documentation以获取popover（）的更多选项和参数。

我建议您使用特定的类名来销毁弹出窗口，而不是使用以下代码。

$("[data-toggle='popover']").popover('destroy');

以上代码将销毁页面中的所有弹出窗口。所以不要这样，使用类选择器。

$(".YourClassName").popover('destroy');

Answer 3

像这样通用的东西（假设你正在使用数据绑定）应该可以做到这一点：

$('[data-toggle="popover"]').popover('hide')

或更极端的电话

$('[data-toggle="popover"]').popover('destroy')

虽然我怀疑这通常会有意义。仍然要解决您遇到的特定错误，您应该创建一个最小的测试用例，以便可以解决该错误本身。

哦，如果您特别想检查开放式弹出式窗口，可以使用.data("bs.popover").$tip.parent().length（这有点像黑客攻击），例如：

$('[data-toggle="popover"]:eq(0)').data("bs.popover").$tip.parent().length == 1

Answer 4

您可以使用以下hide所有邮件：

$("[data-toggle='popover']").popover('hide');

您可以使用以下destroy所有邮件：

$("[data-toggle='popover']").popover('destroy');

hide和destory之间的区别在于，当您hide弹出时，您不需要来被动它，但当你销毁时，你做。

查看我的JSFIDDLE，然后：

点击所有弹出式窗口，然后点击hide。点击hide后，您可以再次点击邮件。
点击所有弹出式窗口，然后点击destroy。点击destroy后，再次点击弹出窗口，看看什么都不会发生，因为它们已销毁。
为了让它们再次正常运行，您需要点击被动，然后尝试。

Answer 5

尝试一下：

$（'YOUR_ELEMENT_SELECTOR'）。popover（'dispose'）;

参考网址：https://getbootstrap.com/docs/4.1/components/popovers/

Answer 6

必须手动初始化弹出窗口，因此您确实知道必须销毁什么，因为您已经初始化它。您应该使用相同的选择器调用destroy函数。或许我错过了什么？

Answer 7

如果您有问题，需要确定将其全部删除：

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

会有所帮助（Popover会自动添加此类，即使对于动态创建的对象也是如此）。它会破坏所有的弹出式DOM对象（包括）。回调等但这就是粗略的方法。通常情况下，我会按popover类（干净的方式）取消所有工作，并确保在之后进行一次硬清理。对我有用！

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

如果您想删除所有执行文件，请使用带有：not-Selector的filter（）

$('.popover').filter(':not(#yourID)').popover('dispose');
$('.popover').filter(':not(#yourID)').remove();

弹出框还会添加一个带有随机数的ID

#popoverxxxxx where xxxxx is a five digit number.

这有时可以帮助比较弹出窗口。当然，这也可以用来识别弹出窗口。

如何销毁Bootstrap Popover的所有实例？

7 个答案:

用弹出窗口标记元素

使用弹出窗口找到所有元素，甚至没有标记

概念证明