jquery-mobile – 将页面加载到div jQuery Mobile

我想通过点击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>

解决方法

$.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');