2013-06-27 169 views
0

在我JQM - 主幹應用程序,我添加一個對話框編程如果某個條件爲真,這樣動態關閉對話框

$('body').append('<div data-role="dialog" id="interlink" data-theme="b" data-close-btn="none" data-url="insignificant"></div> '); 
// remove dialog from DOM on pagehide 
$("#interlink").on('pagehide', function() { 
    $(this).remove(); 
    // remove this views popup-containers 
    $('#interlink-video-popup-popup').remove(); 
}); 

旁邊的對話框中其他內容有一個按鈕打開一個彈出式窗口小部件發揮一個視頻剪輯和一個關閉按鈕來關閉對話框。關閉對話框的代碼如下所示:

backBtnHandler: function(e) { 
    e.preventDefault(); 
    $('#interlink').dialog('close'); 
    $(this).remove(); // all DOM listeners get removed as well by jQuery 
}  

這工作都好,如果視頻剪輯全長的注視下,在彈出的小窗口關閉的結束,用戶點擊該對話框關閉按鈕來關閉它。 需求是視頻剪輯播放時,用戶掃描視頻應停止的另一個NFC標籤,觸發結束事件並關閉彈出窗口。這也是可行的,但對話框也應該關閉。這是一個帶超時的簡化代碼片段來模擬NFC掃描:

INTERPRETOUR.interlinkVideoPlayer = $('#interlink-video-player')[0]; 
// bind onended event to close the popup 
$(INTERPRETOUR.interlinkVideoPlayer).on('ended', function() { 
    $('#interlink-video-popup').popup('close'); 
    INTERPRETOUR.interlinkVideoPlayer = 'undefined'; 
    $('#interlink-back-btn').trigger('click'); 
}); 
// play video 
INTERPRETOUR.interlinkVideoPlayer.src = 'http://mydomain.ca' + this.model.get('video')[0].url; 
INTERPRETOUR.interlinkVideoPlayer.play(); 
setTimeout(function() { 
    $.publish('item', '2479'); 
}, 5000); 

的問題是,$('#interlink-back-btn').trigger('click');調用backBtnHandlerpagehid e爲永不觸發,因此該對話框不會關閉。

任何幫助來解決這個問題將不勝感激。

+0

@Omar:是的。 – bardu

+0

@Omar:更確切地說#interlink是一個Backbone視圖,並利用Underscore模板引擎來填充數據。 – bardu

+0

對於'pagehide'試試這個'$(document).on('pagehide','#interlink',function' – Omar

回答

2

而不是調用一個按鈕使用.trigger('click'),綁定關閉時popupafterclose事件觸發器。

Demo 1/Demo 2

靜態彈出

$('#popupID').on('popupafterclose', function() { 
    $('#dialogID').dialog('close'); 
}); 

動態生成彈出

$(document).on('popupafterclose', '#popupID', function() { 
    $('#dialogID').dialog('close'); 
});