Kullanıcı Açılır Pencereyi Dışa Aktardı Bootstrap Popover'ı Kapatma

Question

Popoverleri içeren bir web sayfasına dinamik olarak yüklenen bazı içeriklerim var. Bu nedenle onları vücuda bağlamaları ve doğru şekilde yerleştirilmeleri gerekiyor.

Kullanıcı, popover'ı veya başka bir popover tetikleyicisinin dışını tıkladığında pop'leri gizlemenin bir yolunu bulmak istiyorum.

Popover'i "gizler" olsaydım, popover gerçekten gizlenir, ancak öğeler DOM'ta kalır. Bu, popover'daki aktif bağlantıların "tıklanabilir" kalması anlamına gelir.

Bunun yerine popover'ı yok edersem gizler, ancak tıklandığında yeniden etkinleştiremez. Popover'ı gizlemenin tek güvenilir yolu "toggle" kullanmaktır. Bu, hangi popovların saklanacağını belirleme karmaşıklığını arttırır. Tüm bu kod ile this JSFiddle'a bakın.

HTML

<a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.yahoo.com'>http://www.yahoo.com</a>" class="some-popover-link">Yahoo</a> 
<br><br> <br> <br> <br> <a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.google.com'>http://www.google.com</a>" class="some-popover-link">Google</a> 
<br><br> <br> <br> <br> <a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.microsoft.com'>http://www.microsoft.com</a>" class="some-popover-link">Microsoft</a> 

JavaScript

$('.some-popover-link').popover({ 
    container: 'body', 
    html: true, 
    placement: 'bottom' 
}); 

$(document).click(function (e) { 
    $('.some-popover-link').each(function() { 
     if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { 
      $(this).popover('hide'); // this hides popover, but content remains 
      return; 
     } 
    }); 
}); 

Answer 1

yüzden dikkatli olun ama çalışması gerekir.

if ($(this).data('bs.popover').tip().hasClass('in')) { 
    $(this).popover('toggle'); 
} 

Answer 2

bunu kullanın kodu: Bu iç uygulanmasına dayanır

$(document).mouseup(function (e) { 
    if ($('.popover').has(e.target).length === 0) { 
     $('.popover').toggleClass('in').remove(); 
     return; 
    } 
});