2013-03-05 21 views
5

Ho fatto qualche ricerca e ho solo stato in grado di capire che posso attach events to the buttons that cause it to close.Come allegare una funzione per Popover respingere evento (Twitter Bootstrap)

Tuttavia, questo non gestisce il caso in cui il l'utente fa semplicemente clic da qualche altra parte. Vorrei attivare un evento mentre il popover sta svanendo e viene rimosso. Qualcuno ha dei suggerimenti?

Aggiornamento: Ho provato la risposta qui sotto e non sono riuscito a farlo funzionare, anche se chiaramente dovrebbe dall'esempio jsfiddle. Potrebbero esserci dei conflitti con le librerie e il setup che sto usando.

Ecco il codice che sto utilizzando:

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

crea la popover, lo mostra, e poi aggiunge l'evento on hidden. I primi due funzionano correttamente. Tuttavia, il terzo non si innesca quando si fa clic sul pulsante Annulla (data-dismiss='modal') o si fa clic in un altro punto dello schermo per chiudere il pulsante.

Le librerie che sto utilizzando sono: require.js, backbone.js, marionette.js.

Ho rivisto il jsfiddle da utilizzare fare clic e funziona ancora: http://jsfiddle.net/zj37u/

Qualcuno ha suggerimenti per spiegare perché la mia potrebbe non funzionare o come posso eseguire il debug? Ho già provato un paio di varianti.

risposta

10

C'è l'evento hide e hidden che è possibile ascoltare sul popover. hide si verifica quando il popover inizia a svanire e hidden è quando si completa.

Ecco un esempio di un avviso che visualizza ogni volta che si sposta il mouse di distanza dal collegamento popover:

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

anche come jsfiddle: http://jsfiddle.net/Ny5Km/4/

Aggiornamento:

Per la versione v3.3.5 bootstrap, vedere popover-events

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

Grande risposta e apprezzo l'esempio jsfiddle pure. Sfortunatamente non sono riuscito a farlo funzionare con la mia attuale configurazione. Eventuali suggerimenti? – Matt

+1

Quale versione di Bootstrap stai usando? Funziona con l'ultima versione (2.3.1) ma non funzionava con una versione precedente (ho provato in precedenza 2.2.2) – hajpoj

+0

Funziona! Devono essere stati i problemi. Grazie! – Matt

Problemi correlati