关于手机端JQuery的异步传输时UI界面不更新的bug
JQeryMobile的UI界面，其标签首先经过jquery.mobile-1.0a2.min.js的处理（你可以用chrome的审查元素功能，看到事实上显示的页面中已经由JS添加许多新标签和class，而不仅仅是原来你写的那点标签），然后再进行css布局。因此，当你的页面与后台异步传输获得数据的时候，返回的内容通过append插入页面后，往往没有相应的CSS效果。这个时候我们就需要动态加载jquery.mobile-1.0a2.min.js，即在异步传输获得数据后，再读处理页面的jquery.mobile-1.0a2.min.js。
具体如下：
functionLoadJs(file){//动态调用JS文件函数
varhead=$('head').remove('#loadScript');
$("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendTo(head);
}
functiongetData(type,url,argname1,arg1,argname2,arg2,nextfunction){
//采用XMLHttpRequest方法向服务器提供参数，获得数据
//参数定义：类型，调用的后台页面，参数1的名称，参数1的值，参数2的名称，参数2的值，返回结果后执行的下一个函数名
var$xmlhttp,$result;
$xmlhttp=false;
//branchfornativeXMLHttpRequestobject
if(window.XMLHttpRequest){
try{
$xmlhttp=newXMLHttpRequest();
}catch(e){
$xmlhttp=false;
}
//branchforIE/WindowsActiveXversion
}elseif(window.ActiveXObject){
try{
$xmlhttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
$xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){
$xmlhttp=false;
}
}
}
$xmlhttp.open(type,url,true);//异步调用
$xmlhttp.setRequestHeader(argname1,arg1);//将参数定义在header里
$xmlhttp.setRequestHeader(argname2,arg2);
$xmlhttp.onreadystatechange=function()
{
if($xmlhttp.readyState==4&&$xmlhttp.status==200){
$result=$xmlhttp.responseText;//得到返回信息
$glb_result=$result;
eval(nextfunction);//执行下一个函数
}else{
//result=xmlhttp.status;
}
}
$xmlhttp.send('USERNAME=user1&PASSWORD=123456');//异步发送，这里send的内容无意义
}
functionGetShowMyList()//获取根目录文件列表函数
{
varauthcode=GetRequest();
$glb_authcode=authcode;//保存为全局变量
var$url='http://222.31.76.184/rest.php?case=showMyList';
getData("get",$url,"AUTHCODE",authcode,"","","ShowMyListOK()");
}
functionShowMyListOK(){//处理根目录文件列表函数
if($glb_result==""){
alert("密码或用户名有错！");
}else{
//alert("成功："+$glb_result);
var$obj=jQuery.parseJSON($glb_result);
$.each($obj,function(i,n){
if($obj[i].wname!=""){
varonelist="<li><imgsrc='stylesheets/images/file_icon/"+SwitchIcon($obj[i].wext)+"'class='ui-li-icon'/><ahref='#'onclick=\"download(\'"+$obj[i].wid+"\')\">"+$obj[i].wname+"</a><spanclass='ui-li-count'>"+$obj[i].wsize+"B</span><ahref='dialog/operatefile.html'>操作</a></li>";
$("#wlist").append(onelist);
}
});
LoadJs("js/jquery.mobile-1.0a2.min.js");//处理成功后再调用jquery.mobile的JS函数对页面内容进行处理
}
}
http://hi.baidu.com/%CE%F7%B1%B1%C5%DD%C3%E6%CD%F5/blog/item/ca3f507810d8d6ff2e73b3cd.html