Bootstrap popover, hide on click outside?

Question

using bootstrap popover, and now im trying to get this code to click outside the popover to close the popover:

$('body').on('click', function (e) {     $('[data-toggle="popover"]').each(function () {         //the 'is' for buttons that trigger popups         //the 'has' for icons within a button that triggers a popup         if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {             $(this).popover('hide');         }     }); }); 

But when i use this part, i can close the popover but i cant click the other buttons, anyone got any idea how i can do that?

All the buttons:

<a href="#" class="btn btn-xs btn-primary" data-toggle="popover">This opens popover</a> <a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work  <a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work  

Answer 1

I found this : http://bootply.com/99372

$('body').on('click', function (e) {     $('[data-toggle=popover]').each(function () {         // hide any open popovers when the anywhere else in the body is clicked         if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {             $(this).popover('hide');         }     }); }); 

It's almost the same code as you...

Answer 2

Just add this element to close the popover on next click.

data-trigger="focus"  

Reference from here: Bootstrap Popover