如何将函数附加到popover dismiss事件（Twitter Bootstrap） [英] How to attach a function to popover dismiss event (Twitter Bootstrap)

问题描述

我做了一些搜索，只能看出我可以将事件附加到导致其关闭的按钮。

但是，这不会处理用户刚才的情况点击别的地方我想触发一个事件，因为popover正在褪色并被删除。任何人都有任何建议？

更新：我已经尝试了下面的答案，无法让它上​​班， jsfiddle的例子。可能与我正在使用的图书馆和设置有一些冲突。

以下是我使用的代码：

  this。$ el 
 .popover（{
 html：true，
 title：'Schedule a约会'，
 content：'< div id ='+ this.popoverView.cid + ''class =event-popover>< / div>'，
 placement：placement 
}）
 .popover（'show'）
 .on隐藏'，功能（e）{
 alert（'hidden'）; 
}）; 
  

它创建popover，显示它，然后将添加到隐藏的事件。前两个工作正常。但是，第三个不会触发点击取消按钮（ data-dismiss ='modal'）或单击屏幕上其他位置关闭按钮。

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

我修改了jsfiddle以使用点击，它仍然有效： a href =http://jsfiddle.net/zj37u/ =nofollow noreferrer> http://jsfiddle.net/zj37u/

解决方案

有隐藏和隐藏事件，您可以在popover上收听。 隐藏当popover开始消失时，隐藏就是完成。

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

HTML ：

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

JS：

 code> 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/

更新： / p>

对于引导版本v3.3.5，请参阅 popover-events

  $ popover.on（hidden.bs.popover，function（e）{
 alert（hidden.bs.popover）; 
}）; 
  

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.

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 hidden event. 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.

Libraries I'm using are: require.js, backbone.js, marionette.js.

I've revised the jsfiddle to use click and it still works: 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.

解决方案

There is the hide and hidden event that you can listen to on the popover. hide occurs when the popover begins to fade away and hidden is when it completes.

Here is an example of an alert displaying whenever you move the mouse away from the popover link:

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");
});

Also as a jsfiddle: http://jsfiddle.net/Ny5Km/4/

Update:

For the bootstrap version v3.3.5, see popover-events

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

这篇关于如何将函数附加到popover dismiss事件（Twitter Bootstrap）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！