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?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事件。
?
?
?
?
?
