js脚本运行起来卡，请问是什么意思。
现在的问题是：在chrome里面没问题,在FF和IE下就特别卡，请问是怎么回事啊。
JS代码如下:
$(document).ready(function(){
//JobLocation焦点获得
$('#JobLocation').focus(function(){
$.ajax({
url: 'http://192.168.170.85:8080/awp/widget/Prefecture!getAll',
dataType: 'jsonp',
jsonp:'callback',
cache:false,
type:'GET',
success: function(json) {
prefectureFilling('geoShow',json.prefectureList);
$('#geoShow').show();
}
});
});
//向一个div中填充地区列表
function prefectureFilling(divID,prefectureList){
$('#'+divID).empty();
//一最外层div块开头
var entireDiv='<div id="cityLocation">';
//①①添加提示文字div块
entireDiv += '<!-- 提示文字 --><div id="cityLocationTit" class="cityListNotice"><span style="line-height:30px;">城市列表</span><span style="float:right"><img src="../image/close1.png" title="关闭" alt="js脚本运行起来卡，请教是什么意思" style="cursor:hand" id="imgClose"/></span></div>';
//关闭按钮添加悬浮和点击事件
$('#imgClose').live('mouseover',function(){
$(this).attr('src','../image/close2.png');
});
$('#imgClose').live('mouseout',function(){
$(this).attr('src','../image/close1.png');
});
$('#imgClose').live('click',function(){
$('#'+divID).hide();
});
//②添加热点城市div块开头
entireDiv += '<!-- 热点城市 --><div id="cityHot clearfix">';
//1-添加热点城市提示文字：热门
entireDiv += '<span class="hotTSpan">热门:</span>';
//2-添加详细热点城市ul+li
entireDiv += '<ul id="cityHotUl">';
//得到热点城市列表
var hotList = new Array();
var hID = 0;
for(var m=0;m<prefectureList.length;m++){
if('hot' == prefectureList[m].MARK){
hotList[hID] = prefectureList[m];
hID++;
}
}
//循环添加热点城市li标签
for(var i=0;i<hotList.length;i++){
entireDiv += '<li class="hotCityLi" id="hotCityLi'+i+'" cityName="'+hotList[i].FULLNAME+'" cityID="'+hotList[i].GCODE+'">'+hotList[i].CNNAME+'</li>';
//给热点城市添加点击事件
$('#hotCityLi'+i).live('click',function(){
$('#JobLocation').val($(this).attr('cityName'));
$('#CompanyLocation').val($(this).attr('cityName'));
$('#locationID').val($(this).attr('cityID'));
$('#cityLocation').hide();
});
//鼠标悬浮在省份上时
$('#hotCityLi'+i).live('mouseover',function(){
$(this).css({"color":"#009BD8","cursor":"pointer"});
});
//鼠标离开在省份上时
$('#hotCityLi'+i).live('mouseout',function(){
$(this).css({"color":"black"});
});
}
//②添加热点城市div块结尾
entireDiv += '</ul></div>';
//③添加其他城市div块开头
entireDiv += '<!-- 热点城市 --><div id="cityHot clearfix">';
//1-添加其他城市提示文字：其他
entireDiv += '<span class="hotTSpan">其他:</span>';
//2-添加详细其他城市div
entireDiv += '<div class="provinceInLine" id="provinceInLine"><!-- 下面显示省份所属的市 -->';
//得到所有省份列表
var provinceList = new Array();
var pID = 0;
for(var i=0;i<prefectureList.length;i++){
var id = prefectureList[i].GCODE;
//开头为100
var s1 = id.substring(0,3);
//且不是直辖市 即第四位为1,2,3,4
var s2 = id.substring(3,4);
if ("100"==s1 && s2<5) {
continue;
}
if("1"==id.substring(0, 1)){
provinceList[pID] = prefectureList[i];
pID++;
}
}
//控制省份索引
var l = 0;
//省份分为6行
for(var i=0;i<6;i++){
//添加每行的5个城市span
for(var j=0;j<5;j++){
entireDiv += '<span id="province1" class="provinceStyle"><label id="'+provinceList[l].GCODE+'" pID="'+provinceList[l].GCODE+'">'+provinceList[l].CNNAME+'<img src="../image/arrow_down_black.jpg"/></label></span>';
l++;
}
//添加下面所属市县
l = l-5;
// cityList索引
var w = 0;
for(var p=0;p<5;p++){
entireDiv += '<div class="cityDetailDiv" cityDetailDivID="'+provinceList[l].GCODE+'" id="cityDetailDiv'+provinceList[l].GCODE+'">';
//根据provinceList[l]这个省得到该省的所有县市
var tarID = provinceList[l].GCODE.substring(2,4);
var cityList = new Array();
for(var t=0;t<prefectureList.length;t++){
//省份id截取
var id1 = prefectureList[t].GCODE.substring(2,4);
//开头为20
var id2 = prefectureList[t].GCODE.substring(0,2);
if(tarID==id1){
//cityList[w] = json.prefectureList[t];
//将得到的所有县市添加到此div中
entireDiv += '<span class="citySpan"><label class="cityLabel" id="cityName'+prefectureList[t].GCODE+'" cityName="'+prefectureList[t].FULLNAME+'" cityID="'+prefectureList[t].GCODE+'">'+prefectureList[t].CNNAME+'</label></span>';
$('#cityName'+prefectureList[t].GCODE).live('click',function(){
$('#JobLocation').val($(this).attr('cityName'));
$('#CompanyLocation').val($(this).attr('cityName'));
$('#locationID').val($(this).attr('cityID'));
$('#'+divID).hide();
});
//鼠标悬浮在县市上时
$('#cityName'+prefectureList[t].GCODE).live('mouseover',function(){
$(this).css({"color":"#009BD8","cursor":"pointer"});
});
//鼠标离开在县市上时
$('#cityName'+prefectureList[t].GCODE).live('mouseout',function(){
$(this).css({"color":"black"});
});
w++;
}
}
entireDiv += '</div>';
l++;
}
//给每一个省份添加点击事件，点击后展开对应显示区县的div块
l = l-5;
for(var y =0;y<5;y++){
//鼠标悬浮在省份上时
$('#'+provinceList[l].GCODE).live('mouseover',function(){
$(this).css({"color":"#009BD8","cursor":"pointer"});
});
//鼠标离开在省份上时
$('#'+provinceList[l].GCODE).live('mouseout',function(){
$(this).css({"color":"black"});
});
//鼠标点击选中省份时
$('#'+provinceList[l].GCODE).live('click',function(){
var cityDetailDivList = $('.cityDetailDiv');
for(var c = 0;c<cityDetailDivList.length;c++){
var str = cityDetailDivList[c].id.substring(13);
if($(this).attr('pID') == str){
cityDetailDivList[c].style.display = 'block';
}else{
cityDetailDivList[c].style.display = 'none';
}
}
});
l++;
}
}
//③添加其他城市div块结尾
entireDiv += '</div></div>';
//④④添加div偏移控制div
entireDiv += '<div style="clear:both"></div>';
//一最外层div块结尾
entireDiv += '</div>';
$('#'+divID).append(entireDiv);
}
})
var city = null;
$('#JobLocation').focus(function(){
if(city){
prefectureFilling('geoShow',city);
return;
}
$.ajax({
url: 'http://192.168.170.85:8080/awp/widget/Prefecture!getAll',
dataType: 'jsonp',
jsonp:'callback',
cache:false,
type:'GET',
success: function(json) {
city = json.prefectureList;
prefectureFilling('geoShow',city);
$('#geoShow').show();
}
});
});
[解决办法]
把你的所有live方法都去掉。
在最后append了以后，用class样式选择dom绑定事件。
不知道你为什么要用这样的方式进行绑定事件，每个类似i的变量在事件触发后的函数体里也没有用到。就算用到这样写也不对。
没有研究过jquery的源码，不过我想是事件代理到doucment上面，每次触发相应事件的时候去匹配调用了live方法选择器，有就执行对应的方法。
你这样等于给doument重复绑定了N次事件。