twitter-bootstrap 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15215995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to attach a function to popover dismiss event (Twitter Bootstrap)
提问by Matt
I've done some searching and I've only been able to figure that I can attach events to the buttons that cause it to close.
我已经做了一些搜索,但我只能确定我可以将事件附加到导致它关闭的按钮上。
However, this doesn't handle the case when the user just clicks somewhere else. I would like to trigger an event as the popover is fading and being removed. Anyone have any suggestions?
但是,这不能处理用户只是点击其他地方的情况。我想触发一个事件,因为弹出窗口正在消失并被删除。有人有什么建议吗?
Update:I've tried the answer below and was unable to get it to work, although it clearly should from the jsfiddle example. There may be some conflicts with the libraries and setup I'm using.
更新:我已经尝试了下面的答案,但无法让它工作,尽管它显然应该来自 jsfiddle 示例。我使用的库和设置可能存在一些冲突。
Here's the code I'm using:
这是我正在使用的代码:
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');
});
It creates the popover, shows it, and then adds the on hiddenevent. The first two work correctly. However, the third one doesn't trigger when clicking the cancel button (data-dismiss='modal') or clicking elsewhere on the screen to close the button.
它创建弹出窗口,显示它,然后添加on hidden事件。前两个工作正常。但是,当单击取消按钮 ( data-dismiss='modal') 或单击屏幕上的其他位置以关闭按钮时,不会触发第三个。
Libraries I'm using are: require.js, backbone.js, marionette.js.
我正在使用的库是:require.js, backbone.js, marionette.js。
I've revised the jsfiddle to use click and it still works: http://jsfiddle.net/zj37u/
我已经修改了 jsfiddle 以使用 click 并且它仍然有效:http: //jsfiddle.net/zj37u/
Does anyone have suggestions as to why mine may not be working or how I can debug it? I've already tried a couple variations.
有没有人有关于为什么我的可能无法工作或我如何调试它的建议?我已经尝试了几个变体。
回答by hajpoj
There is the hideand hiddenevent that you can listen to on the popover. hideoccurs when the popover begins to fade away and hiddenis when it completes.
还有就是hide和hidden你可以听上酥料饼的事件。hide当弹出框开始消失并hidden完成时发生。
Here is an example of an alert displaying whenever you move the mouse away from the popover link:
这是每当您将鼠标从弹出链接移开时显示的警报示例:
HTML:
HTML:
<a href="#" id="button"
class="btn danger"
rel="popover"
data-original-title="title"
data-content="content">popover</a>
JS:
JS:
var $popover = $("a[rel=popover]").popover({
trigger: "hover"
}).click(function(e) {
e.preventDefault();
});
$popover.on("hidden", function(e) {
alert("hidden");
});
Also as a jsfiddle: http://jsfiddle.net/Ny5Km/4/
也作为 jsfiddle:http: //jsfiddle.net/Ny5Km/4/
Update:
更新:
For the bootstrap version v3.3.5, see popover-events
bootstrap 版本 v3.3.5 参见 popover -events
$popover.on("hidden.bs.popover", function(e) {
alert("hidden.bs.popover");
});

