Bootstrap弹出框手动关闭需要两次点击才能重新打开。

Question

我有一个包含JS元素的Bootstrap弹出框，当点击该元素时，使用手动方法关闭弹出框，如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上的完整详细信息在此处：

调用.popover('hide')可以防止下一次点击时popover打开 #18860

好消息是，虽然等待3.3.7版本的提交，但可以应用一个简单的解决方法。我将把它发布为解决方案。

更新2 同意：这是新提出的“重复”的问题的副本。看起来问者比我先遇到了这个问题！不过，我会把这个问题留在这里，因为显然我（和其他人）在查找时没有找到那个问题，希望它能有所帮助。

- Kate

---

你为什么不把弹出框的内容放在“show”按钮的数据内容变量中？ - Whiplash450

是的：在小提琴上，只是为了让它与真实网站保持相似。在真实网站上，这是因为弹出内容包含HTML和动态加载内容，这似乎不可能使用data-content属性。将其从页面上隐藏的元素移动的JS最初来自于bootstrap网站，但是在关闭弹出窗口后将其复制回去的技巧意味着元素会持续存在，下次弹出时，它不会重新创建。 - Kate

您可以在设置弹出框时或稍后通过以下方式指定HTML或动态内容： $("#popover").popover({ html: true, content: "此处放置动态内容！" }); 这对于双击问题没有帮助，但供参考 :) - Whiplash450

还是非常感谢！ - Kate

Answer 1

感谢GitHub用户“julesongithub”提供的解决方法。将此代码放在您希望使用.popover('hide')关闭的弹出框页面上，即可解决此问题。本质上，它通过重置弹出框的'inState.click'变量来工作，而隐藏方法并没有这样做。

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

- Kate

Answer 2

我使用的解决方法是在触发弹出框的元素上使用click()函数，原因如下：当弹出框正在显示且用于显示它的元素也是隐藏它的元素时，您只想“隐藏”弹出框。也就是说，使用click()函数将使其消失。因此，我使用以下代码而不是$('#element').popover('hide')： $('#element').click() 到目前为止，这个方法运作得很好...

- JoseAriel

---

也许不够优雅，但是这个聪明的解决方法我很喜欢。 - Joe Lu

哇，你的解决方案像冠军一样有效。谢谢您先生！！！ - papfan

唯一对我有效的解决方案，谢谢！ - cawecoy

Answer 3

我通过更改弹出框的实例化触发选项来解决了这个问题。

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

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

源线程

更多弹出选项

- sharkbaitoohaha