我在一类 Twitter Bootstrap 弹出框上使用以下代码,以确保一次只能打开一个弹出框,并且在弹出框外部单击会关闭它。在弹出框内单击不应关闭弹出框,确保可以有效使用弹出框内的任何表单元素。
我的解决方案基于 StackOverflow 问题的这个公认答案如何检测元素外的点击?
它几乎可以完美地工作,除了在弹出框内单击仍然会关闭弹出框。StopPropagation 不会从 .popover 类的点击侦听器中触发。
检查弹出框会发现它们确实有 .popover 类,那么为什么听者没有听到点击呢?
HTML:
<a href="#" class="linkPopover">Popover One</a>
<a href="#" class="linkPopover">Popover Two</a>
脚本:
$(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();
});
谢谢您的帮助。