jquery mobile loadPage 不工作

Question

好吧，我做到了question几天前就填了，但不知道我是否清楚。

所以，我现在使用另一个函数 $.mobile.loadPage

做了一些更简单的事情

我想做的只是将内容从另一个文件加载到 div，就像使用普通 jquery 的 $.ajax 一样。

在我的主页中:

<div data-role="page">
    <button id="load" style="border: solid blue;">Click here to load</button>
    <div data-role="content" id="target">
    <!-- ajax load here -->
    </div>
</div>

这是另一个文件中的 html:

<div id="secondPage" style="border:solid red;">
   <p>test</p>
</div>

最后是 js

 $("body").on("click", "#load", function () {
    $.mobile.loadPage("mobile/favorites", {
        pageContainer: $('#target'),
        type: 'post',
        reloadPage: true
    });
});

在我看来没有错误，URL 加载了我在 chrome 调试中检查的内容。

那么，我缺少什么？

Answer 1

您的代码正在尝试加载另一个页面中的一个页面。第二页 (id="secondPage") 缺少 data-role="page" 属性。

我从未尝试过完成您在这里尝试的事情，但根据文档，它似乎令人困惑。

该方法加载一个页面，将其插入容器(而不是另一个页面)内的 DOM 中。如果加载的页面已经在 DOM 中(之前已加载)，则 reloadPage 参数会强制刷新该页面。不是你想做的。

你会更好地通过 jQuery 加载内容，插入到 DOM $("#myDiv").load("ajax/test.html"); 然后刷新当前页面$("#myPage").page("destroy").page(); 请注意，如果您只是插入 jQuery Mobile 未增强的 html，则可能不需要最后一点。