Wie kann Popover in dieser Funktion geschlossen werden?

Question

Ich möchte das Popover schließen, indem ich außerhalb klicke (oder auf den Bildschirm klicke). Was mache ich in diesem Fall falsch?

HTML

<div class="container"> 
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover Example</a> 
    <div> 
    <button type="button" class="btn btn-warning">Hide</button> 
    </div> 
</div> 

JS

$(document).ready(function(){ 
$("[data-toggle='popover']").click(function(){ 
    $("[data-toggle='popover']").popover('show'); 
}); 
$(body).click(function(){ 
    $("[data-toggle='popover']").popover('hide'); 
}); 

}); 

Fiddle https://jsfiddle.net/1rbddcap/1/

Answer 1

Sie haben zwei Probleme im Code:

1) $(body) sollte $('body') sein. Tagname-Selektor muss in Anführungszeichen eingeschlossen werden.

2) stop Elternkörper Ereignispropagation zu Popover klicken für die Erstellung von Showfunktion arbeiten.

$("[data-toggle='popover']").click(function(e){ 
e.stopPropagation() 
    $("[data-toggle='popover']").popover('show'); 
}); 
$('body').click(function(){ 
    $("[data-toggle='popover']").popover('hide'); 
}); 

Working Demo

Answer 2

versuchen mit diesem Code unten kann Ihnen helfen, das Problem

$(document).ready(function(){ 
 
    $("[data-toggle='popover']").click(function(){ 
 
     $("[data-toggle='popover']").popover('show'); 
 
     return false; 
 
    }); 
 
    $('body').click(function(){ 
 
     $("[data-toggle='popover']").popover('hide'); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover Example</a> 
 
    <div> 
 
    <button type="button" class="btn btn-warning">Hide</button> 
 
    </div> 
 
</div>

zu lösen