2013-03-05 18 views
5

我已經做了一些搜索和我只能夠計算,我可以attach events to the buttons that cause it to close.如何附加功能酥料餅的解僱事件(Twitter的引導)

然而,這不處理的情況下,當用戶只需點擊其他地方。隨着popover消失並被刪除,我想要觸發一個事件。任何人有任何建議?

更新:我已經嘗試了下面的答案,無法讓它工作,但它顯然應該從jsfiddle的例子。與我正在使用的庫和設置可能會有一些衝突。

下面是我使用的代碼:

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

它創建酥料餅,顯示它,然後添加on hidden事件。前兩個工作正常。但是,點擊取消按鈕(data-dismiss='modal')或點擊屏幕上的其他位置以關閉按鈕時,第三個按鈕不會觸發。

我正在使用的庫有:require.jsbackbone.jsmarionette.js

我已經修改爲使用點擊的jsfiddle,它仍然有效:http://jsfiddle.net/zj37u/

有沒有人有意見,爲什麼礦可能無法正常工作或如何調試呢?我已經嘗試了一些變化。

回答

10

存在hidehidden事件,您可以在彈出窗口上收聽。 hide發生在彈出開始消失時,並且hidden是完成時。

這裏是當你從酥料餅的鏈接移動鼠標離開的警告顯示的例子:

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

另外,作爲一個的jsfiddle: http://jsfiddle.net/Ny5Km/4/

更新:

對於引導版本v3.3.5,請參閱popover-events

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

偉大的答案,我很欣賞的jsfiddle例子也是如此。不幸的是,我無法使用我當前的設置。有什麼建議麼? – Matt 2013-03-06 23:20:43

+1

你使用的是什麼版本的Bootstrap?這適用於最新的(2.3.1),但不適用於舊版本(我以前試過2.2.2) – hajpoj 2013-03-07 00:27:10

+0

它的工作原理!這一定是問題。謝謝! – Matt 2013-03-07 19:22:32