jQuery mobile 开发问题记录

一、动态加载页面问题

---

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