Schließen des Bootstrap-Popups, wenn der Benutzer auf das externe Popover klickt

Question

Ich habe einige Inhalte, die dynamisch auf einer Webseite mit Popovers geladen sind. Aus diesem Grund muss ich sie an den Körper binden, damit sie korrekt geladen und angezeigt werden.

Ich möchte eine Möglichkeit finden, die Popover zu verbergen, wenn ein Benutzer außerhalb des Popover oder eines anderen Popover-Auslösers klickt.

Ich fand, dass, wenn ich das Popover "verstecke", das Popover tatsächlich versteckt, aber die Elemente bleiben im DOM. Dies bedeutet, dass aktive Links im Popover "klickbar" bleiben.

Wenn ich stattdessen das Popover zerstöre, blendet es sich aus, kann aber nicht erneut aktiviert werden, wenn darauf geklickt wird. Die einzige zuverlässige Möglichkeit, das Popover zu verbergen, ist die Verwendung von "toggle". Dies erhöht die Komplexität der Bestimmung, welche Popover zu verbergen sind.

Bitte beachten Sie this JSFiddle mit all diesem Code.

HTML

<a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.yahoo.com'>http://www.yahoo.com</a>" class="some-popover-link">Yahoo</a> 
<br><br> <br> <br> <br> <a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.google.com'>http://www.google.com</a>" class="some-popover-link">Google</a> 
<br><br> <br> <br> <br> <a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.microsoft.com'>http://www.microsoft.com</a>" class="some-popover-link">Microsoft</a> 

JavaScript

$('.some-popover-link').popover({ 
    container: 'body', 
    html: true, 
    placement: 'bottom' 
}); 

$(document).click(function (e) { 
    $('.some-popover-link').each(function() { 
     if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { 
      $(this).popover('hide'); // this hides popover, but content remains 
      return; 
     } 
    }); 
}); 

Answer 1

Diese auf interne Implementierung beruht so vorsichtig sein, aber es sollte funktionieren. JSFiddle Link

if ($(this).data('bs.popover').tip().hasClass('in')) { 
    $(this).popover('toggle'); 
} 

Answer 2

Mit diesem Code:

$(document).mouseup(function (e) { 
    if ($('.popover').has(e.target).length === 0) { 
     $('.popover').toggleClass('in').remove(); 
     return; 
    } 
});