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

Question

我有一个使用 Backbone 的单页应用程序，每当我越过某些东西然后单击“后退”按钮时，弹出窗口将永远保留。

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

Answer 1

找到通过数据 API 创建的弹出窗口并不困难，并且已在 David Mulder 和 Amir Popovich 等其他答案中进行了介绍。你只需要做:

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

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

挑战在于处理那些动态创建的弹出窗口。

用弹出框标记元素

我会实现这样的东西。我会覆盖默认的 popover 方法，并且我会尝试尽可能早地执行此覆盖，以便需要 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 的页面，则上面的方法将起作用。 (是的，这是可能的。)我在我的一个应用程序中使用类似的东西来处理工具提示，所以我知道这个原则是合理的。碰巧在我的应用程序中，所有工具提示都是由我的代码创建的，因此不存在遗漏某些内容的风险。

查找所有带有弹出框的元素，甚至是未标记的元素

如果您处于无需标记就可以创建弹出窗口的情况(我称之为“逃逸者”)，那么您需要查询整个 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 代码的代码。

• “清除标记”仅清除标记的弹出框。

• “全部清除”清除所有标记或未标记的弹出窗口。