如何将函数附加到popover dismiss事件(Twitter Bootstrap)

时间:2013-03-05 04:44:45

标签: javascript twitter-bootstrap event-handling popover

我已经做了一些搜索,我只能想到我可以attach events to the buttons that cause it to close.

但是,当用户只是点击其他地方时,这不会处理。我想触发一个事件,因为popover正在消失并被删除。有人有什么建议吗?

更新:我已经尝试了下面的答案而无法让它工作,虽然它显然应该来自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.jsbackbone.jsmarionette.js

我修改了jsfiddle以使用点击它仍然有效:http://jsfiddle.net/zj37u/

有没有人有关于为什么我的工作可能不起作用或我如何调试它的建议?我已经尝试了几种变体。

1 个答案:

答案 0 :(得分:12)

您可以在弹出窗口上收听hidehidden事件。当弹出窗口开始淡出时hide发生,hidden完成时出现<a href="#" id="button" class="btn danger" rel="popover" data-original-title="title" data-content="content">popover</a>

以下是每当您将鼠标从弹出链接移开时显示警报的示例:

HTML:

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

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

JS:

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

同样作为jsfiddle:http://jsfiddle.net/Ny5Km/4/

<强>更新

对于bootstrap v3.3.5版,请参阅popover-events

{{1}}