Schließen Bootstrap Popover beim Klicken außerhalb

Question

Ähnliche Frage bereits gestellt, aber nicht für dieses Beispiel.

Hier haben wir den Code für die popover:

HTML:

<a href="#" class="popover_test">Popover Example</a> 
<!-- POPOVER --> 
<div id="content" class="hidden"> 
    Contents 
</div> 
<div id="title" class="hidden"> 
    Title 
</div> 

Javascript:

$(".popover_test").popover({ 
    html : true, 
    content: function() { 
     return $("#content").html(); 
    }, 
    title: function() { 
     return $("#title").html(); 
    } 
}); 

Was ist der approch, um sie zu verschwinden wenn ich außerhalb des Popover klicke?

hier ein JSFIDDLE es online zu testen: https://jsfiddle.net/C5GBU/1772/

$(".popover_test").popover({ 
 
    html : true, 
 
    content: function() { 
 
     return $("#content").html(); 
 
    }, 
 
    title: function() { 
 
     return $("#title").html(); 
 
    } 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<a href="#" class="popover_test">Popover Example</a> 
 
<!-- POPOVER --> 
 
<div id="content" class="hidden"> 
 
    Contents 
 
</div> 
 
<div id="title" class="hidden"> 
 
    Title 
 
</div>

Dankten.

Answer 1

Überprüfen Sie den folgenden Code -

$('[data-toggle="popover"]').popover(); 

$('body').on('click', function (e) { 
    if ($(e.target).data('toggle') !== 'popover' 
     && $(e.target).parents('.popover.in').length === 0) { 
     $('[data-toggle="popover"]').popover('hide'); 
    } 
}); 

Answer 2

Wieder einmal habe ich bearbeitet: https://jsfiddle.net/C5GBU/1775/

$(".popover_test").popover({ 
    html : true, 
    content: function() { 
     return $("#content").html(); 
    }, 
    title: function() { 
     return $("#title").html(); 
    } 
}).on('click', function(e) { 
     $('.popover-content').click(function(e){ 
     e.stopPropagation(); 
    }) 

}); 





$('body').on('click', function (e) { 
    $('.popover_test').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_test').has(e.target).length === 0) { 
      $(this).popover('hide'); 
     } 
    }); 
}); 

Bitte lassen Sie mich wissen, ob das funktioniert