0

我有一个带有标题、内容和面板的普通 jquery 页面

<div id="myPage" data-role="page">
    <nav id="myPanel" data-role="panel">...menu...</nav>
    <div id="myHeader" data-role="header">...button...text...</div>
    <div id="myContent" data-role="content">...welcome text...</div>
</div>

该页面最初加载了面板中的菜单（使用自定义 ajax 调用）和欢迎文本作为内容。除了文本，标题还包含一个打开菜单面板的按钮。

当用户点击菜单项时，我只想替换内容，而不是整个页面。

我一直在尝试

$.mobile.changePage('my/valid/url', {
    pageContainer : $('#myPage')
});

我可以在我的网络日志中看到我从 JQM ajax 调用中获得了正确的内容。但是当我查看 DOM 时，唯一发生的事情是一个空div附加到#myPage，即没有插入来自 ajax 的内容。旧的内容仍然存在。见下文：

<div id="myPage" data-role="page">
    <nav id="myPanel" data-role="panel">...menu...</nav>
    <div id="myHeader" data-role="header">...button...text...</div>
    <div id="myContent" data-role="content">...welcome text...</div>
    <div data-role="content" data-url="my/valid/url">EMPTY</div>
</div>

另一件事是整个页面#myPage, 是隐藏的(display="none")。似乎 JQM 想要显示一个全新的页面，而不是只允许我更改其中一个 div 的内容#myPage。

是否可以使用 JQM 仅更改 JQM 页面的一部分？

我已经使用自定义 ajax 调用完成了它，然后自己将标记附加到 DOM。但是我需要手动做很多其他的事情，比如增强、显示/隐藏负载指示器等。

4

0 回答 0