How to attach a function to popover dismiss event (Twitter Bootstrap)

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/15215995/how-to-attach-a-function-to-popover-dismiss-event-twitter-bootstrap

标签

javascript

twitter-bootstrap

event-handling

popover