将页面加载到 div jQuery Mobile

Question

我想通过单击 jQuery Mobile 中的按钮为 div 容器加载另一个文件夹中的页面内容（例如：“files/pages/example.html”）！

怎么做？

<div data-role="page">
     <div id="container" data-role="content"><button id="clickButton">Click me!</button></div>
</div>

Answer 1

$.mobile.loadPage 是您需要的方法。它允许您加载外部 html 文件并将其插入到 dom 中。此方法的默认设置是将其作为整个页面加载，因此您必须指定将其加载到 dom 元素中的选项。这是一个示例（未经测试）代码：

$('#clickButton').on("click",function(){
  $.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')})
});

现在，不要忘记跨域安全问题。我设法通过添加以下内容在 Firefox 中完成这项工作：

$("#landingPage").live('pageinit', function() {
            jQuery.support.cors = true;
            $.mobile.allowCrossDomainPages=true;
        });

此外，您正在加载的页面必须包含在 data-role=page div 中（假设它具有 id='secondPage'）。加载后，在 data-role=page 上触发 id=secondPage div:

$('#secondPage").trigger('pagecreate');