Bootstrap Popover content clickable when hidden

Question

My site has multiple popovers over a map (just a div with background image) with clickable icons:

When clicking those icons, a popover is shown. This popover has a carousel that contains text with links:

When I click outside the popover, all popovers are hidden. This supposedly works ok. I got the code from this Stack Overflow question.

But the real issue occurs when you click outside the popover to hide it again. The popover is hidden, but it's still in the DOM. This means the links are still clickable!

When I click the plus icon to hide the popover, the popover is hidden (removed?), but when clicking outside the plus (i.e. anywhere on the page), the popover is still present (but not visible) right above </body>.

Please help! This annoys the hell out of me.. :(

Edit: Might be worth mentioned that the popovers are dynamically added:

$('.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

I had a similar issue, big headache, and searching I got to this page:

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

Apparently when you add Popovers to dynamic content you need to add this option:

selector: '[rel="popover"]'

in your case it would be

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

This resolved all my "hidden popover clicks detection" issues.

Answer 2

This is what I did in order to prevent elements within the hidden popover from being clicked

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

The idea being that when the popover is hidden, you should remove it from the DOM.

Hope it helps!