好吧,我几天前就填写了这个问题,但不知道我是否清楚。
因此,我现在使用另一个函数使事情更简单$.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
});
});
在我看来没有错误,当我在Chrome调试中检查时,URL加载了内容。
那么,我错过了什么?
您的代码正在尝试在另一个页面中加载一个页面。缺少的第二页(id="secondPage"
)是属性data-role="page"
。
我从未尝试过完成您在这里尝试的内容,但根据文档似乎令人困惑。
该方法加载一个页面,将其插入容器(而不是另一个页面)内的 DOM 中。如果加载的页面已经在 DOM 中(以前已加载),则 reloadPage
参数会强制刷新该页面。不是你想做的。
jQuery加载内容,插入DOM $("#myDiv").load("ajax/test.html");
然后刷新当前页面,$("#myPage").page("destroy").page();
请注意,如果您只是插入未由jQuery Mobile增强的html,则可能不需要最后一位。