在ajax异步请求动态打印与时事件安装

作为前端菜鸟，总会遇到一些傻傻的问题（指代本人），今天就刚好又遇到一则

用JQ的ajax异步请求数据库中的页面菜单权限数据，然后动态打印在菜单栏中，然后给其安装个点击事件来切换不同权限对应的内容页面：

$.ajax({
 url: 'index.php?p=home&c=Menu&a=getMenu',
 type: 'POST',
 async:true,
 dataType: 'json',
 success:function(data){
  if(data['num']==1001){
  $("#menu").html('');
  var menuStr='';
  //打印菜单
  for(var key in data['res']){
   menuStr += '<details><summary class="firstMenu">'+data['res'][key]['name']+'</summary>';
   if(data['res'][key]['sub']!=null){
    for (var subKey in data['res'][key]['sub']) {
     menuStr+='<p class="secondMenu" url="'+data['res'][key]['sub'][subKey]['url']+'">'+data['res'][key]['sub'][subKey]['name']+'</p>';
    }
   }
   menuStr+='</details>';
  }
  //打印菜单
  $("#menu").html(menuStr);
  }else if(data['num']==1002){
   alert(data['tip']);
  }
  },
 error:function(){
  alert('服务器错误');
 }
});

打印完后给菜单在安装点击事件：

$(".secondMenu").on('click',function(){
alert(1);
});

但是点击并没有效果。为什么会没有效果，本菜鸟一阵费解，思考了一会儿，是不是安装点击事件时菜单还没完成打印？既然如此就改用同步请求，这样的话打印肯定已经执行完，页面菜单的元素肯定存在，试了一下果然是可以的，但是控制台抛出了提示：

Synchronous XMLHttpRequest on the main thread

大体意思是  XMLHttpRequest  【ajax】发送请求，是在浏览器js的主线程上，ajax同步发送请求引起的，这样会引起很不好的用户体验，可能导致浏览器卡死等等！

关于该问题可参考该博文：http://blog.csdn.net/xllily_11/article/details/51879420

显然该方案是不推荐的，问题关键点是找到了就是安装事件时没有找到dom，那dom的创建是在什么时候？创建完dom后直接给每个dom安装事件不就可以解决了吗？顺着思路找到创建dom的地方就是success的回调内，果然将新创建的dom事件安装放在菜单dom打印完的语句后，问题就解决了：

 //打印菜单
$("#menu").html(menuStr);
//菜单跳转
$(".secondMenu").on('click',function(){
alert(1);
});

解决完问题深深感觉到基础还是不扎实，对异步同步的了解不够深刻，今后要好好加油！