当Bootstrap Popover被隐藏时，其内容是否可点击

Question

我的网站有一个地图上有多个弹出窗口（只是具有背景图像的div）和可点击的图标：

当点击这些图标时，会显示一个弹出窗口。该弹出窗口有一个包含文本链接的轮播图：

当我在弹出窗口外单击时，所有弹出窗口都会隐藏。这似乎可以正常工作。我从此 Stack Overflow 问题中得到了代码。

但是真正的问题发生在你再次单击弹出窗口以外的区域隐藏它时。弹出窗口虽然被隐藏了，但仍然存在于DOM中。这意味着链接仍然可以被点击！

当我单击加号图标隐藏弹出窗口时，弹出窗口被隐藏（删除？），但是当单击加号以外的任何地方时（即页面上的任何位置），弹出窗口仍然存在（但不可见），就在</body>上面。

请帮帮我！这真的很恼人.. :(

编辑：值得一提的是，弹出窗口是动态添加的：

$('.plus').each(function(i) {

    var $self = $(this);

    $self.popover({
        html: true,
        title: false,
        placement: function() {
            return 'auto left'; // TODO: calculate placing
        },
        content: function() {

            var html   = '<div id="carousel-' + i + '" class="carousel slide">';
            var list   = '<ol class="carousel-indicators">';
            var slides = '<div class="carousel-inner">';

            var count = 0;

            $('.post[data-category="' + $(this).data('category') + '"]').each(function(j) {

                // add indicator for slide
                list += '<li data-target="#carousel-' + i + '" data-slide-to="' + count + '"' + (count == 0 ? ' class="active"' : '') + '></li>';

                // add html for slide
                slides += '<div class="item' + (count == 0 ? ' active' : '') + '">' + $(this).html() + '</div>';

                // increase counter
                count++;

            });

            // merge all html
            html += list + '</ol>' + slides + '</div></div>';

            return html;
        }
    });

- rebellion

Answer 1

我曾经遇到类似的问题，非常棘手。在搜索后，我找到了这个页面：

https://github.com/twbs/bootstrap/issues/4215

显然，当您将Popover应用于动态内容时，需要添加此选项：

selector: '[rel="popover"]'

在您的情况下，应该是这样的。

$self.popover({
    selector: '[rel="popover"]'
    html: true,
    title: false,
    ...

这解决了我所有“隐藏的弹出框点击检测”问题。

- user2744441

---

感谢您挖掘这个问题。这个解决方案对于我动态创建的弹出框非常有效。我遇到的问题是在为自动搜索结果和表单验证动态创建弹出框时，为同一元素创建了两个弹出框。我使用“destroy”来删除弹出框，但我仍然能够点击内容并触发其他操作。由于参考了BS问题日志，这个答案应该得到更多的赞同。 - Josh

Answer 2

为了防止隐藏的弹出框内部的元素被点击，我做了以下操作：

$('button.new-history').on('hidden.bs.popover', function () {
    $(this).next().remove();
})

这个想法是当弹出框被隐藏时，应该将其从DOM中删除。

希望这能帮到你！

- Salman Hasrat Khan

---

我只需要在next()函数调用中添加'.popover'选择器，以防止在弹出窗口已被删除的情况下删除其他DOM元素：**$(this).next('.popover').remove();** - Thomas C. G. de Vilhena

不一定需要.popover元素总是紧挨着应用popover的元素。大多数情况下，我们使用popover选项容器，将其绑定到dom中的其他元素，例如body！ - bhavya_w

Answer 3

其他的解决方案对我都不起作用，因为我使用了其他函数来仅允许一次弹出，以及当它失去焦点时隐藏弹出（它们也是动态生成的）。

但我发现了一个非常简单的解决方案，使用css来“修复”这个问题：

.popover.fade {
    z-index:-1;
}

.popover.fade.in {
    z-index:2;
}

请确保.popover.in的z-index高于其他元素，同样没有.in的那个z-index要低。

- 21stcn

Answer 4

我遇到了同样的问题，在Chrome的F12模式中搜索一段时间后，我找到了以下解决方案适用于我。

在使用按钮手动关闭弹出框之后：

<button 
  type=button 
  class="btn btn-default pull-right"
  onclick="$('.mypopoverclass').popover('hide');">
    Close
</button>

弹出窗口的内容仍然存在，但是不可见，并隐藏在页面上的其他元素之后。

我将按钮稍微改动了一下，像这样：

<button 
  type=button 
  class="btn btn-default pull-right"
  onclick="$('.mypopoverclass').popover('hide'); $('.popover.fade').remove()">
    Close
</button>

通过添加

  $('.popover.fade').remove()

对于按钮的onClick处理程序，弹出窗口已被删除，不再隐藏屏幕上的元素。此外，下一次调用弹出窗口将再次显示它。

我希望这对您也有用！

- eheydenr

Answer 5

我认为你需要“销毁”弹出框，而不仅仅是“隐藏”它。

在这里查看API：http://getbootstrap.com/2.3.2/javascript.html#popovers

- Hans

---

谢谢你的建议，但我已经尝试过了，结果是弹出窗口再也没有出现过。 - rebellion

@rebellion 很抱歉听到这个消息，但是popover('destroy')应该像文档中描述的那样工作。如果它没有起作用，那么错误必须在其他地方，除非您使用旧版Bootstrap：https://dev59.com/questions/tGfWa4cB1Zd3GeqPjrQq - Hans

谢谢@Hans，我已经更新了我的问题，并附上了动态添加的弹出框代码。你认为这与“销毁”问题有关吗？ - rebellion

@rebellion：从那段代码中我看不出它如何影响“destroy”功能，但它可以解释为什么“hide”无法真正隐藏链接：因为它们是由轮播API引用的。例如，如果您在弹出窗口的HTML中放置简单的链接，则在使用popover（'hide'）时它们将无法被点击，因此似乎是轮播造成了问题。 - Hans

观察得很好。我想不通的是，当点击弹出框触发元素（.plus）时，弹出框会完全被销毁。但下一次它仍然能正常工作。嗯... - rebellion