如何将函数附加到弹出窗口关闭事件（Twitter Bootstrap）

Question

我搜索了一些内容，发现只能通过附加事件到关闭按钮上。

然而，这并没有处理用户点击其他地方的情况。我想在弹出框淡出并被移除时触发一个事件。有什么建议吗？

更新： 我尝试了下面的回答，但无法使其工作，尽管从jsfiddle示例中显然可以。可能与我使用的库和设置存在冲突。

以下是我正在使用的代码：

this.$el
    .popover({ 
        html: true, 
        title: 'Schedule an appointment', 
        content: '<div id="' + this.popoverView.cid + '" class="event-popover"></div>', 
        placement: placement
    })
    .popover('show')
    .on('hidden', function(e) {
        alert('hidden');
    });

它创建了一个弹出窗口，显示它，然后添加“on hidden”事件。前两个操作正常。但是第三个操作在单击取消按钮（data-dismiss='modal'）或单击屏幕其他位置以关闭按钮时不起作用。

我使用的库是：require.js、backbone.js和marionette.js。

我已经修改了jsfiddle，使用click仍然可以工作：http://jsfiddle.net/zj37u/ 是否有人可以提供建议，为什么我的代码可能无法工作或如何进行调试？我已经尝试了几种变化。

- Matt

Answer 1

有两个事件hide和hidden，你可以监听弹出框上的这两个事件。hide事件会在弹出框开始消失时触发，hidden事件则是在弹出框完全消失后触发。

以下是一个示例，每当你将鼠标移开弹出框链接时，会显示一个警告：

HTML:

<a href="#" id="button"
        class="btn danger" 
        rel="popover" 
        data-original-title="title" 
        data-content="content">popover</a>

JS：

var $popover = $("a[rel=popover]").popover({
    trigger: "hover"
}).click(function(e) {
    e.preventDefault(); 
});

$popover.on("hidden", function(e) {
    alert("hidden");
});

作为一个jsfiddle: http://jsfiddle.net/Ny5Km/4/

更新:

对于Bootstrap版本v3.3.5，请参见popover-events

$popover.on("hidden.bs.popover", function(e) {
    alert("hidden.bs.popover");
});

- hajpoj

---

非常好的答案，我也很感激jsfiddle的示例。不幸的是，我无法在当前设置中使其工作。有什么建议吗？ - Matt

你使用的是哪个版本的Bootstrap？这适用于最新版本（2.3.1），但在旧版本（我之前尝试过2.2.2）中无法工作。 - hajpoj