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页的链接时，它不会加载第2页的<div data-role='dialog'>。

你如何解决这个问题？

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以进行清理。