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