【摘】jQueryMobile开发问题记录
一、动态加载页面问题
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事件。