Bootstrap Popover内容在隐藏时可单击

Question

我的网站在地图上有多个弹出窗口(只是带有背景图像的div),带有可点击的图标:

http://f.cl.ly/items/44382Q2Y3U3t2S450r3w/Skjermbilde%202013-09-01%20kl.%2023.15.58.png

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

http://f.cl.ly/items/0s2v2i193z0u1D0N163D/Skjermbilde%202013-09-01%20kl.%2023.35.34.png

当我在弹出窗口外单击时,所有弹出窗口都被隐藏.这应该可行.我从Stack Overflow问题得到了代码.

但是当您在弹出窗口外单击以再次隐藏它时,会出现真正的问题.弹出窗口是隐藏的,但它仍然在DOM中.这意味着链接仍然可以点击!

http://f.cl.ly/items/0T0p422c1A202b2M1J20/Skjermbilde%202013-09-01%20kl.%2023.34.28.png

当我单击加号图标隐藏弹出窗口时,弹出窗口被隐藏(删除？),但是当在加号外部(即页面上的任何位置)点击时,弹出窗口仍然存在(但不可见)正上方</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

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

请参阅此处的 API：http://getbootstrap.com/2.3.2/javascript.html#popovers