javascript - Bootstrap Popover 内容在隐藏时可点击

Question

我的网站在 map 上有多个带有可点击图标的弹出框(只是一个带有背景图片的 div):

单击这些图标时，会显示一个弹出窗口。这个弹出窗口有一个轮播，其中包含带链接的文本:

当我在弹出窗口外单击时，所有弹出窗口都被隐藏。这应该可以正常工作。我从 this Stack Overflow question 得到了代码。

但是当您在弹出窗口外单击以再次隐藏它时，真正的问题出现了。弹出窗口已隐藏，但它仍在 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;
        }
    });

Answer 1

我有一个类似的问题，很头疼，我搜索到这个页面:

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

显然，当您将 Popover 添加到动态内容时，您需要添加此选项:

selector: '[rel="popover"]'

在你的情况下会是

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

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