I'm using the following code on a class of Twitter Bootstrap Popovers to ensure that only one popover can be opened at a time, and that clicking outside the popover closes it. Clicking inside a popover should not close the popover, ensuring that any form elements inside the popover can be used effectively.
I based my solution off of this accepted answer to the StackOverflow Question How do I detect a click outside an element?
It works almost perfectly, except that clicking inside the popover still closes the popover. StopPropagation is not firing from within the click listener on the .popover class.
Inspecting the popovers reveals that they do have the class .popover, so why isn't the listener picking up the click?
HTML:
<a href="#" class="linkPopover">Popover One</a>
<a href="#" class="linkPopover">Popover Two</a>
Script:
$(document).click(function() {
$('.linkPopover').popover('hide');
});
$('.popover').click(function(e) {
e.stopPropagation(); // code inside this listener is not being fired
});
$('.linkPopover').click(function() {
$('.linkPopover').not(this).popover('hide');
});
$('.linkPopover')
.popover({
content: 'test'
})
.click(function(e) {
e.stopPropagation();
});
Thank you for your help.
