Wie eine Funktion zum Befestigen an popover Ereignis (Twitter Bootstrap) entlassen

Question

Ich habe einige der Suche getan, und ich habe nur in der Lage gewesen zu herausfinden, dass ich kann attach events to the buttons that cause it to close.

Dies ist jedoch nicht der Fall ist, wenn der Griff Benutzer klickt einfach woanders hin. Ich möchte ein Ereignis auslösen, wenn das Popover verschwindet und entfernt wird. Hat jemand irgendwelche Vorschläge?

Update: Ich habe die Antwort unten versucht und war nicht in der Lage, es zur Arbeit zu bringen, obwohl es eindeutig aus dem Beispiel Jsfiddle sollte. Es kann zu Konflikten mit den verwendeten Bibliotheken und Einstellungen kommen.

Hier ist der Code, den ich mit:

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

Es schafft die popover, zeigt es, und dann fügt das on hidden Ereignis. Die ersten beiden funktionieren korrekt. Der dritte wird jedoch nicht ausgelöst, wenn Sie auf die Abbrechen-Schaltfläche klicken (data-dismiss='modal') oder auf eine andere Stelle auf dem Bildschirm klicken, um die Schaltfläche zu schließen.

Bibliotheken, die ich verwende, sind: require.js, backbone.js, marionette.js.

Ich habe die jsfiddle klicken verwenden überarbeitet und es funktioniert immer noch: http://jsfiddle.net/zj37u/

Hat jemand Vorschläge, warum nicht meine oder arbeiten kann, wie ich es debuggen? Ich habe schon ein paar Variationen ausprobiert.

Answer 1

Es gibt die hide und hidden Ereignis, das Sie auf dem Popover hören können. hide tritt auf, wenn das Popover zu verblassen beginnt und hidden ist, wenn es abgeschlossen ist. Hier

ist ein Beispiel für eine Warnung angezeigt wird, wenn Sie die Maus weg von dem popover Link bewegen:

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

Auch als jsfiddle: http://jsfiddle.net/Ny5Km/4/

Aktualisierung:

Für die Bootstrap-Version v3.3.5 finden popover-events

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