jQuery Mobile Pages 之外的持久 HTML答案

【问题标题】：Persistent HTML outside of jQuery Mobile PagesjQuery Mobile Pages 之外的持久 HTML
【发布时间】：2011-12-14 23:32:56
【问题描述】：

我想在我的主页上的 <div data-role="page"> 元素之外包含一些 HTML。通过 ajax 加载新页面时不应替换此 HTML。

此示例应用程序是在右上角有一个绝对定位的小 div，仅在与 AJAX 调用相关的错误或应用程序的状态更新时显示。

如果我尝试在 index.html 页面的正文中包含任何 HTML，它会立即被 jQuery Mobile 替换。我不想在我写的每一页上都包含这个 div。

有什么想法吗？

【问题讨论】：

您能否在您的问题中添加一些简略的 HTML 和 JS 示例代码来演示该问题？这将使人们更容易准确地理解正在发生的事情。只是身体和 JS 本身就可以了。如果 jsfiddle.net 上的演示重现（不确定 jQuery 移动示例），您还可以提供指向小提琴的链接。
Mike，不用将新的 html 代码放在 div 之外，您可以使用两个“主要”div，在其中一个中执行 ajax 和 jQuery 魔术，然后通过 jQuery 在其上加载新的 html另一个 div 应该保持不变。仍需要有关此问题的更多信息。

标签： javascript jquery jquery-mobile

【解决方案1】：

我认为divs 不会被替换。例如，这会将第一个看不见的div 带到顶部：

http://jsfiddle.net/RQkrj/2/

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.top {
    z-index: 999;
}
</style>
<script>
$('div#page').live('pageshow', function(event, ui) {
    $('div#doesNotGetRemoved').addClass("top");
});
</script>
</head>
<body>

<div id="doesNotGetRemoved" style="background: red; position: absolute;">This is a div</div>

<div id="page" data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>Hello world</p>        
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

【讨论】：

页面在 JQuery Mobile 中没有被替换。他们与 JQTouch 在一起。我认为你可以/应该让你的 div 成为一个额外的页面。我之前在 html 中添加了 div（不是作为页面），当我更新到 JQMobile 的新版本时，它会导致奇怪的渲染。我还没试过最新的。