Bootstrap popover手动关闭需要两次单击才能重新打开 [英] Bootstrap popover manual close requires two clicks to reopen

问题描述

我有一个Bootstrap popover，其中包含一个JS元素，点击后，使用Bootstrap网站上显示的手动方法关闭popover，即

I've got a Bootstrap popover which contains an element with JS that when clicked, closes the popover using the manual method as shown on the Bootstrap website, i.e.

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

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

However, it then takes two clicks on the element the popover is opened from to re-open it. It's as if it still thinks the popover is on show and so the first click is to toggle it closed and the second click then toggles it open again. Does anyone know how to properly close a popover using JS to avoid this? I've created the following fiddle that demonstrates the problem.

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

非常感谢。

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

一如既往地感谢SO社区保持整洁和相关的地方。但是，这不是拟议问题的重复。这个问题的问题是弹出窗口没有初始化直到第一次点击。因此，第一次点击没有打开弹出窗口，但确实初始化它，以便第二次和所有后续点击工作。

Thanks as always to the SO community for keeping the place tidy and relevant. However, this isn't a duplicate of the proposed question. The problem in that question was that the popovers weren't initialised until the first click. Therefore, the first click did not open the popover, but did initialise it so the second and all subsequent clicks worked.

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

That is not the problem I found. Popovers are initialised on page load so my first click does open the popover. When closed using the manual .popover('hide') method, the second click then does not work. i.e. every other click works in my scenario. These are different issues caused by different problems. The issue in the linked post is to initialise popovers before the first click, which I already do.

我报告了我在GitHub上的twbs bootstrap项目中发现的问题原来这是一个已知的bug，在7月份的3.3.5版本中首次报道。它有一个3.3.6的里程碑修复但是下滑（最近出现了3.3.6），现在有3.3.7的里程碑。关于Github的详细信息：

I reported the issue I found on the twbs bootstrap project on GitHub and it turns out it is a known bug, first reported in version 3.3.5 back in July. It had a milestone fix of 3.3.6 but this slipped (3.3.6 came out recently) and now has a milestone of 3.3.7. Full details on Github here:

致电。 popover（'隐藏'）阻止弹出窗口在下次点击时打开＃18860

好消息，有一个简单的解决方法可以在等待时应用它将致力于3.3.7。我会将其作为解决方案发布。

Good news though, there is a simple workaround that can be applied while waiting for it to be committed to 3.3.7. I'll post it as a solution.

更新2
同意：这是新提议的'副本' 题。看起来问问者在我面前遇到了这个问题！我会在这里留下这个问题，但很明显我（和其他人）在寻找时并没有找到那个，所以希望它可以提供帮助。

Update 2 Agreed: this is a duplicate of the newly proposed 'duplicate of' question. Looks like the asker encountered the issue just before me! I'll leave the question here though as clearly I (and others) didn't find that one at the time of looking so hopefully it can be of help.

推荐答案

感谢GitHub用户'julesongithub'提供此解决方法。使用.popover（'hide'）将其放在与要关闭的弹出窗口相同的页面上可以解决问题。基本上它通过重置隐藏方法没有执行的弹出窗口的'inState.click'变量来工作。

Thanks go to GitHub user 'julesongithub' for providing this workaround. Putting this on the same page as a popover you wish to close using .popover('hide') solves the issue. Essentially it works by resetting the 'inState.click' variable for the popover which the hide method isn't doing.

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

这篇关于Bootstrap popover手动关闭需要两次单击才能重新打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！