一、動態加載頁面問題
1.存在這樣一個頁面布局：
main.html 為主界面A,B為該頁面中的三個page，其中A為splitview左部分頁面，B為右半部頁面
a1.html 為一個獨立的頁面
a2.html為一個獨立的頁面
2.在main.html中有這樣一段script
$("#A1").live("pagecreate",function(){
$.getScript("a1.js", function(){
$.mobile.changePage(a1.html',{transition: "none",changeHash:false});
});
});
而a1.html中存在一個按鈕btn1,a1.js中有這樣一段代碼
$("#btn1").live("click",function(){
$.getScript("a2.js", function(){
$.mobile.changePage(a2.html',{transition: "none",changeHash:false});
});
});
無論a1.js還是a2.js中的按鈕觸發一個動作，然后動態生成一個頁面填充至B,而后使用
$.mobile.changePage("#B");
這種操作是不能成功的。
每當a1->a2時，a2頁面中的pageceate及pageinit事件會被調用
同理，每當a2->a1時，a1頁面中的pageceate及pageinit事件會被調用
為了解決這個問題，
方法1.可以刪除a1,a2頁面，把這兩個頁面的html代碼合並至main.html中。
方法2.如果這樣會導致頁面龐大不好維護，也可以采用在頁面一加載之初，a1.html的內容使用ajax獲取，並且追加至A容器中，當btn1按鈕點擊時，同樣，使用ajax把a2.html的內容追加至A容器。
二、動態生成ListView問題
這個問題花了整整一天的時間才解決了。之前老是出現各種奇怪的錯誤，典型如：
Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'
我的listview的容器ul完全是動態生成的。動態HTML代碼如下：
<div data-role="page" id="pLogin" data-hash="false">
<div data-role="header" data-theme="b" data-position="inline">
<h1>歡迎使用</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true" id="lv1">
<li><a href="#">AAAAAAAAAAA<a></li>
<li><a href="#">BBBBBBBBBBB<a></li>
<li><a href="#">CCCCCCCCCCC<a></li>
<li><a href="#">DDDDDDDDDDD<a></li>
</ul>
</div>
</div>
</div>
調用
$("#lv").listview('refresh');時，出錯了：Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'
查了N多資料，終於弄明白了。因為我的page容器也是動態生成的。page數據加載至容器時，jquerymobile並沒有對該page容器進行初始化。因此調用 page的content下的listview組件的refresh方法時，會出現異常。
解決方法：
在dom數據加載完成后，重新生成page
$("#pLogin").page();
$("#lv").listview('refresh');
問題成功解決。
三、splitview導航時，導航標簽所在頁面消失。
存在場景，L為splitview的左部分，R為splitview的右部分。
在L容器中，存在
<li><a id="a1" onclick="fun1()" href="#d1">導航1</a></li>
<li><a id="a2" onclick="fun1()"href="#d2">導航2</a></li>
在點擊a1,a2按鈕后，觸發fun1，使用ajx去服務器取數據，並且生成一段HTML格式化代碼，填充至R容器中。
服務器生成HTML代碼如下：
<div data-role="page" id="d1" data-hash="false">
<div data-role="header" data-theme="b" data-position="inline">HHHHHH</div>
<div data-role="content">
<div class="content-primary">
XXXXXXXXXXX
</div>
</div>
</div>
fun1代碼：
html = ${發送ajax后，由服務器生成的格式如上}
$("#R").append(html);
$.mobile.changePage("d1");
問題就出現了，是的，R部分顯示了XXXXXXXXXXX，是該顯示的東東，不過，L部分變成空白了。
琢磨了很久，原來是這樣，因為使用ajax，是異步請求，a1點擊時錨點對應的d1 頁面並沒有生成，並且填充至R容器，由於找不到d1，因此左部分空白了。
解決方法仍然有兩個：
1.在R部分再做一個空白的page,a1,a2的href屬性設置為該空白page的id即可
2.在發送異步請求之前，先生成page所在div容器，至少讓d1容器先生成出來，不至於a1找不到錨點。在請求完成后，把請求得到的數據填充至content部分即可。
四、header上增加返回按鈕時，導致header變高
我的header部分是動態生成的。根據業務需要，有的page需要返回按鈕，有的page不需要。業務詳情共用一個page,每次點擊后，根據業務信息更新header及業務情況，決定是否顯示返回按鈕。
我的方法：
在header中加入一個按鈕header.append('<a onclick="history.go(-1)">返回<a>');
然后再去修改header部分的文字信息。
不過，問題就來了，第一，返回按鈕的地方不一定准確。第二，header部分變得特別高。把content部分都遮擋了。
解決方案：刪除生成了返回按鈕，使用page帶的返回按鈕屬性。
<div data-role="page" id="p'+id+'" data-add-back-btn="true" data-back-btn-text="返回">
業務邏輯中，使用這樣的代碼
if(back){
$("a[data-rel='back']",header).show();
}else{
$("a[data-rel='back']",header).hide();
}
來決定是否顯示返回按鈕。
這樣做解決了header超高問題，返回位置不准確問題。
五、關於a標簽結合changePage使用問題
如果點擊一個a標簽后，調用一個changePage轉到目標頁面，而在a標簽上，又設置了href="#id"屬性，這樣可能會導致點擊a標簽后， 頁面多次跳轉問題。
解決方案，如果頁面使用了button那么就使用changePage
如果頁面使用了href屬性，則在生成目標page后，不需要調用changePage事件。