最近在做三級地址選擇,用的是JqueryMobile框架。省,市,區,爲三個獨立的頁面,出現的bug爲:第一次加載頁面的時候,所有地址列表都正常顯示,但是返回再次選擇地址的時候,只會出現省,市+區頁面不會顯示出來,並且有時候省市區會亂跳,看控制檯,獲取地址列表的接口也正常返回,所有問題出在綁定數據函數上。最後終於找到了答案,產生bug的原因有二;
1.我在省的列表做了兩次跳轉,導致跳轉錯亂。
2.應該聲明一下,在當前頁加載省的信息(這一點很重要,因爲jquerymobile爲單頁應用,即使爲頁面跳轉,其實都加載到了一個DOM中,只不過page不同。之前之一對這個不是特別敏感,自從出了這次bug後,知道了它的存在重要性。)
說了那麼多,還是貼代碼來的明白
var addAddressModel = {
/*三級聯動*/
"oneMenuList":function(){
return shopAPI.DoAuthenticationPost("regionlist","type="+''+"&rid="+'');
},
one_menuAjax_data:'',
getOneMenuListData:function(){
one_menuAjax_data=addAddressModel.oneMenuList();
},
bindOneMenuListData:function(){
var html='';
for(var i=0;i<one_menuAjax_data.regionlist.length;i++) {
html+='<li><a href="#" data-change-hash="false" data-transition="slide" class="ui-btn ui-btn-icon-right ui-icon-carat-r" data-transition="slide" onclick="getCity_list('+one_menuAjax_data.regionlist[i].rid+',\''+one_menuAjax_data.regionlist[i].rname+'\')">'+one_menuAjax_data.regionlist[i].rname+'</a></li>';
}
$("#provincList").html(html);
},
"twoMenuList":function(rid){
return shopAPI.DoAuthenticationPost("regionlist","type=2&rid="+rid);
},
two_menuAjax:'',
getTwoMenuListData:function(rid){
two_menuAjax=addAddressModel.twoMenuList(rid);
console.log(two_menuAjax);
},
bindTwoMenuListData:function(obj,rname){
var html='';
proviceList=rname;
for(var i=0;i<two_menuAjax.regionlist.length;i++){
html+='<li><a href="#" data-change-hash="false" data-transition="slide" class="ui-btn ui-btn-icon-right ui-icon-carat-r" data-transition="slide" onclick="getCounty('+two_menuAjax.regionlist[i].rid+',\''+two_menuAjax.regionlist[i].rname+'\')">'+two_menuAjax.regionlist[i].rname+'</a></li>';
}
obj.find("#city_list").html(html);
},
"threeMenuList":function(rid){
return shopAPI.DoAuthenticationPost("regionlist","type=3&rid="+rid);
},
three_menuAjax:'',
getThreeMenuListData:function(rid,rname){
three_menuAjax=addAddressModel.threeMenuList(rid,rname);
},
"bindThreeMenuListData":function(obj,rname){
var html='';
proviceList+=rname;
for(var i=0;i<three_menuAjax.regionlist.length;i++){
html+='<li><a href="#" data-transition="slide" data-rid="'+three_menuAjax.regionlist[i].rid+'" class="ui-btn ui-btn-icon-right ui-icon-carat-r" onclick="get_county('+three_menuAjax.regionlist[i].rid+',\''+three_menuAjax.regionlist[i].rname+'\')">'+three_menuAjax.regionlist[i].rname+'</a></li>';
}
obj.find("#countryList").html(html);
},
/*修改,新增收貨地址*/
"editorAddress":function(data,rid){
return shopAPI.DoAuthenticationPost("address",data);
},
"returnNumber":'',
"returnData":function(){
returnNumber=addAddressModel.editorAddress();
},
"addressDataModel":function(aid){
return shopAPI.DoAuthenticationPost("getaddress","aid="+aid);
},
"getAddress": function(aid){
addressData= addAddressModel.addressDataModel(aid);
},
"bindAddress" : function(obj){
var aid=addressData.aid;
var aname=addressData.aname;
var phone=addressData.phone;
var zip=addressData.zip;
var provincename=addressData.provincename;
var cityname=addressData.cityname;
var regionname=addressData.regionname;
var address=addressData.address;
var email=addressData.email;
var identity=addressData.identity;
var frontimg=addressData.frontimg;
var backimg=addressData.backimg;
var isprimary=addressData.isprimary;
obj.find ("#aid").val(aid);
obj.find("#aname").val(aname);
obj.find('#phone').val(phone);
obj.find('#zip').val(zip);
obj.find("#falseregionid").val(provincename+cityname+regionname);
obj.find("#address").val(address);
obj.find("#email").val(email);
obj.find("#identity").val(identity);
obj.find("#frontimg").val(frontimg);
obj.find("#backimg").val(backimg);
obj.find("#isprimary").val(isprimary);
},
"clearAddress" : function(obj){
obj.find("#aid").val("");
obj.find("#aname").val("");
obj.find('#phone').val("");
obj.find('#zip').val("");
obj.find("#falseregionid").val("");
obj.find("#address").val("");
obj.find("#email").val("");
obj.find("#identity").val("");
obj.find("#frontimg").val("");
obj.find("#backimg").val("");
obj.find("#isprimary").val("");
}
};
/聯動菜單:一級/
$(document).delegate(‘#one_menu’,’pagebeforeshow’, function() {
addAddressModel.getOneMenuListData();
addAddressModel.bindOneMenuListData();
});
/聯動菜單:二級/
function getCity_list(rid,rname){
.mobile.changePage(‘thecity.html’,{data:”rid=”+rid+”&rname=”+rname,changeHash:false,reloadPage:true});
} (document).delegate(‘#two_menu’,’pagebeforeshow’,function(){
var
var parameterurl =
});
/聯動菜單:三級/
function getCounty(rid,rname){
$.mobile.changePage(‘region.html’,{data:”rid=”+rid+”&rname=”+rname,changeHash:false,reloadPage:true});
}
(document).delegate(‘#three_menu’,’pagebeforeshow’,function(){
var page =
var rid = getQueryStringValue(parameterurl,”rid”);
var rname=getQueryStringValue(parameterurl,”rname”);
addAddressModel.getThreeMenuListData(rid,rname);
addAddressModel.bindThreeMenuListData($page,rname);
});
/聯動菜單:三級總和添加至input/
function get_county(rid,rname){
console.log(“應該返回增加收貨地址列表”);
proviceList+=arguments[1];
console.log(proviceList);
window.history.back();
(“#falseregionid”).val(proviceList).attr(‘value’,proviceList).prop(‘value’,proviceList); (“#regionid”).val(rid);
}