jQuery Mobile AJAX導航到具有對話框的頁面

Question

JQM AJAX導航在使用頁內對話框導航到頁面時無法正常工作？

page1.aspx這個：

<div data-role="page"> 
    <div data-role="header">Page 1</div> 
    <div data-role="content"> 
    <a href='page2.aspx'>Click here</a> 
    </div> 
</div>​ 

page2.aspx：

<div data-role="page"> 
    <div data-role="header">Page 2</div> 
    <div data-role="content"> 
    <a href='#popup' data-rel="dialog">Popup</a> 
    </div> 
</div>​ 

<div data-role="dialog" id='popup'> <!-- This is not loaded on AJAX navigation --> 
    <div data-role="header">Page 2 Popup</div> 
    <div data-role="content"> 
    Popup content 
    </div> 
</div>​ 

當你點擊從第1頁的鏈接，它不會加載頁面的<div data-role='dialog'> 2.

你如何解決這個問題？

Answer 1

有一個workaround here。我修改了一點：

$(document).bind('pagecontainerload', function (event, ui) { 
    // Find all dialogs in the DOM 
    var response = ui.xhr.responseText; 
    var data = $(response).find("div[data-role='dialog'],div[data-role='popup']"); 

    for (var i = 0; i < data.length; i++) { 
    var node = data.eq(i); 

    if (node.attr('id') && document.getElementById(node.attr('id'))) 
     $('#' + node.attr('id')).remove(); // Delete existing one 

    node.addClass('cache').appendTo('#form1'); // or appendTo('body') 
    } 
}); 

我加入了類cache進行清理的目的。