1
我有一个移动网站，它由一个HTML页面（Mobile.html）组成。内容被动态加载到data-role="page"的JQM格式的div中。页面上唯一的静态内容是body标签;所有其他内容都是在用户与页面进行交互时构建和拆除的，该页面是通过Web服务调用构建DOM的。使用单个动态.html页面链接到n个JQM“页面”的jQuery Mobile出现的错误
这一切都很好，只有一个例外。链接处理被破坏。一旦JQM附加到URL散列，刷新和导航中断。我一直在测试这个问题的各种解决方案，到目前为止还没有真正的工作。
同时使用JQM夜间生成和1.0A4.1，我已经简化了问题这个测试代码：
<body id='CswMobile'>
<div id="StaticPage1" data-role="page" >
<div id="StaticHeader1" data-role="header"><h1>Static Header 1</h1></div>
<div id="StaticContent1" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<div id="StaticPage2" data-role="page">
<div id="StaticHeader2" data-role="header"><h1>Static Header 2</h1></div>
<div id="StaticContent2" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#StaticPage1').live('tap', function (event) { return onClick(event); });
function onClick(event)
{
var id = $(event.target.outerHTML).attr('href');
var $page = $(id);
if ($page.length === 0) $page = makePage(id);
$page.live('tap', function (event) { return onClick(event); });
$.mobile.changePage($page, 'slide');
return false;
}
function makePage(id)
{
id = id.replace('#', '');
$('body').append('<div id="' + id + '" ' + 'data-role="page">')
var $page = $('#' + id);
$page.append('<div id="Header_' + id + '" ' + 'data-role="header"><h1>Header of ' + id + '</h1>');
var $header = $('#Header_' + id);
$page.append('<div id="Content_' + id + '" ' + 'data-role="content">');
var $content = $('#Content_' + id);
$page.append('<div id="Footer_' + id + '" ' + 'data-role="footer">');
var $li1 = $('<li><a href="#StaticPage1">Static Page 1</a></li>');
var $li2 = $('<li><a href="#StaticPage2">Static Page 2</a></li>');
var $li3 = $('<li><a href="#DynamicPageA">Dynamic Page A</a></li>');
var $li4 = $('<li><a href="#DynamicPageB">Dynamic Page B</a></li>');
var $ul = $('<ul data-role="listview" data-theme="b"></ul>').append($li1).append($li2).append($li3).append($li4);
$content.append($ul);
return $page;
}
</script>
静态内容就像你所期望的，但动态内容会产生意外的行为，通常是浏览器地址栏（http：// localhostDynamicPageA）中的无效URL上的404错误（GET http://localhost/DynamicPageA 404（Not Found））或JQM“加载...”动画。
首先，我无法获得链接处理，根本无需拨打$.mobile.changePage();。到目前为止，新的内容已经在DOM中 - 那么为什么JQM不能处理链接呢？
其次，changePage（）似乎注入了自己的怪癖。单击两次相同的动态列表项会返回404错误。刷新动态链接上的浏览器将返回404.
使用JQM基础结构解决此问题的最简单方法是什么？
编辑：
添加数据url属性的“页”的div解决的问题的一部分 - 链接处理现在可以在点击动态内容;然而，返回（使用JQM的自动生成的“返回”按钮）和刷新仍然被打破。与此错误http://localhostdynamicpagea/#：
- 的“后退”按钮生成该网址“锦绣：对localhostdynamicpagea DNS查找失败，没有这样的主机被称为”。浏览器的Back工作正常 - 所以我可能会推出我自己的“后退”按钮来解决这个问题。
- 动态页面上的浏览器刷新仍会生成一个空屏幕，并显示此控制台日志错误：“GET http://localhost/DynamicPageB 0（）”。我希望在这个URL上刷新一个页面：http://localhost/Mobile.html#DynamicPageB来刷新Mobile.html的动态哈希值。
你是否能够像jsfiddle.com这样的东西重新创建？可能有助于解释probalem。 – dkarzon 2011-05-18 04:15:48
为了使jQM能够处理动态生成的页面，在加载到DOM后，您需要在页面上放置.page（）。所以也许$ content.append（$ ul）.page（）;这刷新与jQM标记的HTML – 2011-05-18 12:49:19
可能相关：http://stackoverflow.com/questions/5597036/jqm-jquerymobile-problem-with-ajax-content-listviewrefresh-not-working和http://stackoverflow.com/问题/ 5249250/jqm-jquerymobile-dynamic-added-elements-not-displayed-correct-and-css- – 2011-05-18 12:52:21