点击事件第一次无效，大神帮我看下？？？

Question

var flag = true;

var mask =$(".container .mask");

function tab(nav,con){

var navObj = $(nav);

var cont = $(con);

// ===========================获取省份数据==============================================================

function gainProvince(){

$.ajax({

type:'get',

dataType:'json',

url: 'http://192.168.199.146/app/ent/get_province',

success:function(data){

console.log(data)

for(var i in data){

var box = $("<li>").appendTo($(".area .list"));

box.html(data[i])

}

}

});

}

//===========================获取市区数据============================================================

function gainCity(a){

$.ajax({

type:'get',

dataType:'json',

url:'http://192.168.199.146/app/ent/get_city?province= '+a ,

success:function(data){

var li = $("<li>").appendTo($(".area .sublist"));

for(var i in data){

var span = $("<span>").appendTo(li);

span.html(data[i]);

}

}

})

}

// ==============================获取行业数据=============================================================

function gainTrade(){

$.ajax({

type:'get',

dataType:'json',

url: 'http://192.168.199.146/app/ent/get_industry ',

success:function(data){

for(var i in data){

var box = $("<li>").appendTo($(".trade .list"));

box.attr('key',i);

box.html(data[i]);

console.log(i)

}

}

});

}

// ==========================获取行业子分类数据================================================

function gainTradeSublist(a){

$.ajax({

type:'get',

dataType:'json',

url: 'http://192.168.199.146/app/ent/get_ind_category?category= '+a,

success:function(data){

var box = $("<li>").appendTo($(".trade .sublist"));

for(var i in data){

var span = $("<span>").appendTo(box);

span.html(data[i]);

}

}

});

}

navObj.unbind();

navObj.on("touchstart", function(){

mask.addClass('hid')

if(nav==".nav li" && flag){

gainProvince();

gainTrade();

flag =false;

}

if(nav==".con .list li" ){

$(".area .sublist").html('');

$(".trade .sublist").html('');

gainCity($(this).html());

gainTradeSublist($(this).attr("key"));

}

if(nav==".con .list li"){

navObj.removeClass('color');

$(this).addClass('color');

cont.removeClass('hidden').addClass('hidden');

cont.eq($(this).index()).removeClass('hidden');

}else if(!cont.eq($(this).index()).hasClass("hidden")){

cont.removeClass('hidden').addClass('hidden');

}else{

cont.removeClass('hidden').addClass('hidden');

cont.eq($(this).index()).removeClass('hidden');

mask.removeClass('hid');

}

}); 

}

tab(".nav li",".con .content"); //省份显示

$(" .area").on("click","li",function(){tab(".con .list li",".area .sublist li")});// 市区显示

$(" .trade").on("click","li",function(){tab(".con .list li",".trade .sublist li")}); // 行业显示

点击省份的时候  第一次点击没有反应 第二次点击才有？？？？？？

Answer 1

<div class="drop-down"> <!-- 面板导航 --> <ul class="nav"> <li>全国 <span class="iconfont">&#xe6a6;</span> <!-- <span class="iconfont hidden">&#xe6a5;</span> --> </li> <li>所有行业 <span class="iconfont">&#xe6a6;</span> </li> <li>排序 <span class="iconfont">&#xe69d;</span> </li> </ul> <!-- 地区分类 --> <div class="con area"> <div class="content hidden"> <!-- 地区分类列表 --> <ul class="list"> </ul> <!-- 地区子分类列表 --> <ul class="sublist"> </ul> </div> </div> <!-- 行业分类 --> <div class="con trade"> <div class="content hidden"> <!-- 行业分类列表 --> <ul class="list"> </ul> <!-- 行业分类子列表 --> <ul class="sublist"> </ul> </div> </div> </div> </div>这个是html结构

Answer 2

我的 tab事件逻辑有问题 自己找了很长时间不知道怎么改，