Bootstrap-Popover, bei Klick außerhalb ausblenden?

Question 1

Bootstrap-Popover verwenden, und jetzt versuche ich, diesen Code dazu zu bringen, außerhalb des Popovers zu klicken, um das Popover zu schließen:

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Aber wenn ich diesen Teil verwende, kann ich das Popover schließen, aber ich kann nicht auf die anderen Schaltflächen klicken, hat jemand eine Idee, wie ich das machen kann?

Alle Tasten:

<a href="#" class="btn btn-xs btn-primary" data-toggle="popover">This opens popover</a>
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work 
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work

Question 2

Ich habe das gefunden : http://bootply.com/99372

$('body').on('click', function (e) {
    $('[data-toggle=popover]').each(function () {
        // hide any open popovers when the anywhere else in the body is clicked
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Es ist fast der gleiche Code wie du …

Question 3

Fügen Sie einfach dieses Element hinzu, um das Popover beim nächsten Klick zu schließen.

data-trigger="focus"

Referenz von hier:
Bootstrap-Popover

Question 4

Tatsächlich benötigen Sie nicht einmal JS, da es in Bootstrap bereits eine Einstellung dafür gibt.

Sehen : http://getbootstrap.com/javascript/#dismiss-on-next-click

“Spezielles Markup erforderlich für das Schließen beim nächsten Klick. Für ein ordnungsgemäßes browser- und plattformübergreifendes Verhalten müssen Sie die <a> Etikett, nicht das <button> -Tag, und Sie müssen auch die Attribute role=”button” und tabindex einschließen.”

Ex. :

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Question 5

Versuche dies. Es schließt das Popover, wenn Sie außerhalb des Popovers klicken.

$('body').on('click', function (e) {
//did not click a popover toggle, or icon in popover toggle, or popover
if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('[data-toggle="popover"]').length === 0
    && $(e.target).parents('.popover.in').length === 0) {
    (($('[data-toggle="popover"]').popover('hide').data('bs.popover') || {}).inState || {}).click = false;
}
});

Eine andere Lösung,

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

hinzufügen tabindex=”0″ und data-trigger=”Fokus”

Question 6

Popover einfach auszublenden funktioniert nicht. Sie müssen zweimal klicken, um das Popover wieder anzuzeigen.
https://github.com/twbs/bootstrap/issues/16732

Damit es für Bootstrap 3.3.6 korrekt funktioniert. Versuche dies:

$('body').on('click', function (e) {
        $('[data-toggle=popover]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false;
            }
        });
    });

Bootstrap 4 verwendet _activeTrigger Anstatt von inState:

$(e.target).data("bs.popover")._activeTrigger.click = false

Question 7

Sogar ich hatte das Problem.. und ich bin in der Lage, es loszuwerden..

Fügen Sie einfach diese Zeile in Ihren Code ein.. :

 $(this).css('display', 'none');

dh

    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
          $('[data-toggle="popover"]').css('display','none');
        }
    });
});

Anregung: Anstatt von ‘Karosserie’ Tag, den Sie verwenden können ‘dokumentieren’

Question 8

Ich codiere nur meine eigene Variante Ihrer Antwort, weil ich ein Problem hatte, bei dem ich beim Versuch, ein Popover nach einem Auswärtsklick erneut zu öffnen, zweimal auf die Schaltfläche klicken musste.

Das Ziel dieses Codes ist es, einen Klick auf die Schaltfläche zu simulieren, die das Popover aktiviert.

Also da ist der Code:

$('html').on('click', function(e) {
    $('[data-toggle="popover"]').each(function() { //Loop for everything containing a data-toggle="popover"
        if ($(this).attr('aria-describedby') != null ) { //Check if the popover is active / contain an aria-describedby with a value
            var id = $(this).attr('aria-describedby'); //Put the value in a variable
            if (!$(e.target).closest(".popover-content").length && $(e.target).attr("aria-describedby") != id && !$(e.target).closest('[aria-describedby="'+id+'"').length) { //Look if the click is a child of the popover box or if it's the button itself or a child of the button
                $('[aria-describedby="'+id+'"]').trigger( "click" ); //trigger a click as if you clicked the button
            }
        }
    });
});