Come posso chiudere/chiudere Bootstrap Popover quando si fa clic sull'elemento di innesco popover?

Question

jsFiddle: http://jsfiddle.net/kAYyR/

Screenshot:

Ecco cosa funziona:

1. Aperto popover sul pulsante cliccare
2. Chiudi popover al clic di fuori popover
3. Chiudi popover al clic del pulsante .close

MA ... Non riesco a chiudere il popover quando si fa nuovamente clic sul pulsante originale. Invece il popover lampeggia di nuovo e si riaccende.

Duplicalo da solo here.

Come posso realizzare questo?

HTML:

<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button> 
<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div> 

JS:

$('#popoverId').popover({ 
    html: true, 
    title: "Popover Title", 
    content: function() { 
     return $('#popoverContent').html(); 
    } 
}); 


var isVisible = false; 
var clickedAway = false; 

$('.popoverThis').popover({ 
    html: true, 
    trigger: 'manual' 
}).click(function (e) { 
    $(this).popover('show'); 
    $('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">&times;</a>'); 
    clickedAway = false 
    isVisible = true 
    e.preventDefault() 
}); 

$(document).click(function (e) { 
    if (isVisible & clickedAway) { 
     $('.popoverThis').popover('hide') 
     isVisible = clickedAway = false 
    } else { 
     clickedAway = true 
    } 
}); 

Answer 1

vuoi lavorare in questo modo?

http://jsfiddle.net/kAYyR/3/

$('#popoverId').popover({ 
    html: true, 
    title: 'Popover Title<a class="close" href="#");">&times;</a>', 
    content: $('#popoverContent').html(), 
}); 

$('#popoverId').click(function (e) { 
    e.stopPropagation(); 
}); 

$(document).click(function (e) { 
    if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) { 
     $('#popoverId').popover('hide'); 
    } 
}); 

Answer 2

usa questo:

$('[data-toggle="popover"]').popover({html: true, container: 'body'}); 

    $('[data-toggle="popover"]').click(function (e) { 
     e.preventDefault(); 
     $('[data-toggle="popover"]').not(this).popover('hide'); 
     $(this).popover('toggle'); 
    }); 

    $(document).click(function (e) { 
     if ($(e.target).parent().find('[data-toggle="popover"]').length > 0) { 
      $('[data-toggle="popover"]').popover('hide'); 
     } 
    });