ユーザーがポップオーバーをクリックしたときにブートストラップポップオーバーを閉じる

Question

ポップオーバーを含むウェブページに動的に読み込まれるコンテンツがあります。このような理由から私は身体にそれらを縛らなければならないので、正しく装填されて現れます。

ユーザーがポップオーバーの外をクリックしたとき、または別のポップオーバートリガーでポップオーバーを非表示にする方法を見つけたいと思います。

ポップオーバーを「非表示」にすると、ポップオーバーは実際に非表示になりますが、要素はDOM内に残ります。これは、ポップオーバー内のアクティブリンクが「クリック可能」なままであることを意味します。

代わりにポップオーバーを破棄すると、非表示になりますが、クリックすると再アクティブ化できません。ポップオーバーを非表示にする唯一の信頼できる方法は、「トグル」を使用することです。これにより、どのポップオーバーを非表示にするかを決定する複雑さが増します。

このコードはすべてthis JSFiddleを参照してください。

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

ので注意してくださいそれが動作するはずです。 JSFiddle Link

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

Answer 2

使用このコード：これは内部実装に依存している

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