Làm cách nào để đóng/loại bỏ Bootstrap Popover khi nhấp vào phần tử kích hoạt cửa sổ bật lên?

Question

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

Ảnh chụp màn hình:

Đây là những gì hoạt động:

1. mở popover vào nút bấm
2. Đóng popover trên nhấp chuột bên ngoài popover
3. Đóng cửa sổ bật lên khi nhấp vào nút .close

NHƯNG ... Tôi không thể đóng cửa sổ bật lên khi bạn nhấp lại vào nút gốc. Thay vào đó, cửa sổ bật lên nhấp nháy và bật lại.

Sao chép chính bạn here.

Tôi làm cách nào để thực hiện việc này?

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

Bạn có muốn làm việc như thế này?

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

tôi sử dụng này:

$('[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'); 
     } 
    });