我遇到了一个问题,我在Bootstrap模式中显示一些数据。这个数据包含一个图标,我正在变成一个popover。当我将鼠标悬停在图标上时,弹出窗口显示并且一切正常,但是当我离开图标时,不仅弹出窗口关闭,而且父模式也关闭。
我认为这与描述here的问题相同。但是,发布的解决方案对我不起作用。我正在捕捉popover的“隐藏”事件,但是既没有设置e.cancelBubble = true,也没有调用e.stopPropagation()来阻止父模式关闭。
我目前没有在我面前的代码,但这是一个基于我的一般回忆的粗略模型......
<!-- ko with: myFoo -->
<div class="modal hide fade" data-bind="visible: isOpen">
<div class="modal-header">
<button type="button" class="close" data-bind="click: close">×</button>
<h3>Title Bar!</h3>
</div>
<div class="modal-body">
<!-- dynamically generated modal content goes here, including... -->
<table>
<tr>
<td data-bind="popover: $data">
<i class="icon-question-mark" data-content="la la la..." />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-bind="click: close">Close</a>
</div>
</div>
<!-- /ko -->
ko.bindingHandlers.popover = {
init: function(element)
{
$(element).children().andSelf().on("mousenter", "[data-content]"function() {
var options = {...}
$(this).popover(options).on("hidden", function(e) {
e.cancelBubble = true;
e.stopPropagation();
});
});
}
};
有没有人对如何解决此问题有任何想法/建议?
答案 0 :(得分:3)
对于那些将此作为评论提及的人表示赞赏:
$("[data-toggle=popover]").on("hidden", function (e) {
e.stopPropagation();
});
注意:'隐藏'而不是'隐藏'。这是针对bootstrap 2.3.2。
答案 1 :(得分:2)
$("[data-toggle=popover]").on("hide", function (e) {
e.stopPropagation();
});
为我解决了这个问题
答案 2 :(得分:0)
事实证明我需要捕捉“隐藏”事件而非“隐藏”事件,因为后者发生在模态已经关闭之后......请参阅下面的最终解决方案:
define ["jquery", "ko", "bootstrap"], ($, ko) ->
ko.bindingHandlers.popover =
init: (element) ->
$(element).children().andSelf().filter("[data-content]").popover()
$(element).children().andSelf().on "hide", "[data-content]", (e) ->
e.stopPropagation?()
return