Bootstrap 2.3.1 弹出框导致父模式关闭答案

【问题标题】：Bootstrap 2.3.1 popover causing parent modal to closeBootstrap 2.3.1 弹出框导致父模式关闭
【发布时间】：2013-07-11 22:56:08
【问题描述】：

我遇到了一个问题，我在 Bootstrap 模式中显示一些数据。此数据包含一个图标，我将其变成一个弹出框。当我将鼠标悬停在图标上时，弹出框显示并且一切正常，但是当我将鼠标从图标上移开时，不仅弹出框关闭，而且父模式也关闭。

我认为这与here 描述的问题相同。但是，发布的解决方案对我不起作用。我正在捕获弹出窗口的“隐藏”事件，但设置 e.cancelBubble = true 或调用 e.stopPropagation() 都不会阻止父模式关闭。

目前我面前没有我的代码，但这里有一个基于我一般回忆的粗略模型......

HTML

<!-- 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">&times;</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();
            });
        });
    }
};

有人对如何解决这个问题有任何想法/建议吗？

【问题讨论】：

除非您编辑帖子并包含您的代码，或者另外创建JSFiddle 以便我们提供反馈，否则我们无法提供任何建议。

标签： twitter-bootstrap modal-dialog jquery popover

【解决方案1】：

感谢 afanasy，他在评论中提到了这一点：

$("[data-toggle=popover]").on("hidden", function (e) {
   e.stopPropagation();
});

注意：“隐藏”而不是“隐藏”。这适用于引导程序 2.3.2。

【讨论】：

【解决方案2】：

$("[data-toggle=popover]").on("hide", function (e) {
    e.stopPropagation();
});

帮我解决了问题

【讨论】：

【解决方案3】：

事实证明，我需要捕获 on “hide” 事件而不是 on “hidden”，因为后者发生在模态已经关闭之后......最终解决方案见下文：

敲除自定义绑定处理程序

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

【讨论】：