Bootstrap弹出窗口手动关闭需要单击两次才能重新打开[重复]

Question

我有一个 Bootstrap 弹出框，其中包含一个带有 JS 的元素，当单击该元素时，使用 Bootstrap 网站上显示的手动方法关闭弹出框，即

$('#element').popover('hide')

但是，它需要在弹出窗口打开的元素上单击两次才能重新打开它。就好像它仍然认为弹出窗口正在显示，所以第一次单击是关闭它，第二次单击然后再次打开它。有谁知道如何使用 JS 正确关闭弹出框以避免这种情况？我创建了以下小提琴来演示该问题。

http://jsfiddle.net/fxqzn4xd/1/

非常感谢。

更新：此问题与提议的问题不重复

一如既往地感谢 SO 社区保持这个地方的整洁和相关。但是，这不是所提出问题的重复。该问题的问题是弹出框没有初始化直到第一次点击。因此，第一次点击并没有打开弹出框，而是对其进行了初始化，因此第二次和所有后续点击都可以正常工作。

这不是我发现的问题。弹出框在页面加载时初始化，所以我的第一次点击确实打开了弹出框。使用手动 .popover('hide') 方法关闭时，第二次单击将不起作用。即在我的场景中，所有其他点击都有效。这些是由不同的问题引起的不同的问题。链接帖子中的问题是在第一次点击之前初始化弹出框，我已经这样做了。

我报告了我在 GitHub 上的 twbs bootstrap 项目中发现的问题，结果发现这是一个已知错误，最早于 7 月在 3.3.5 版本中报告。它有一个里程碑式的 3.3.6 修复，但它滑落了（最近发布了 3.3.6），现在有一个里程碑式的 3.3.7。此处有关 Github 的完整详细信息：

Calling .popover('hide') prevents popover from open on next click #18860

不过，好消息是，有一个简单的解决方法可以在等待它提交到 3.3.7 时应用。我会把它作为解决方案发布。

更新 2 同意：这是新提出的“重复”问题的副本。看起来提问者在我之前遇到了这个问题！我将把问题留在这里，但很明显我（和其他人）在寻找时没有找到那个问题，所以希望它能有所帮助。

Answer 1

我使用的解决方法是触发弹出框的元素上的 click() 函数，原因如下：您只想在显示弹出框时“隐藏”弹出框，并且显示弹出框的元素也是隐藏它的元素。话虽如此， click() 会让它消失。而不是

$('#element').popover('hide')

我用

$('#element').click()

到目前为止效果很好......

Answer 2

感谢 GitHub 用户“julesongithub”提供此解决方法。将其放在与您希望使用 .popover('hide') 关闭的弹出框相同的页面上可以解决此问题。本质上，它通过重置隐藏方法未执行的弹出框的“inState.click”变量来工作。

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover").inState.click = false;
});

Answer 3

我通过在实例化弹出框时更改触发选项来解决此问题。

$('#element').popover({ trigger: 'manual' });

请注意，此选项要求您同时显示和隐藏弹出框。

Source Thread

More popover options