动态生成三级菜单+前端事件处理（冒泡机制取消）

1.先贴上最后的成果图：

2.前端部分（html页面）代码如下（后端省略）：

<script type="text/javascript">
       function loginAdd(){
           document.getElementById("bg").style.display="block";
           document.getElementById("login").style.display="block";
           queryFirstMenu(); //动态生成一级菜单
       }
       //初始化弹出框 动态生成一级菜单
       function queryFirstMenu(){
           var url=base_path+"console/group/index1111";
           $.ajax({
               url:url,
               type:"post",
         dataType:"json",
         success:function (result) {
            //先清空li，防止AJAX异步加载重复生成
            $("#firstMenu_id li").remove();
            /** 为了方便动态拼接，打在此处查看。
             <ul id="firstMenu_id">
             <li id="firstMenu = 基础数据">基础数据</li>
               <ul id="twoMenu = 基础地理">
                   <li id="twoId" οnclick="query1(this.id)">基础地理</li>
                     <ul>
                        <li>行政区</li>
                        <li>水系</li>
                        <li>绿地</li>
                     </ul>
                  <li>遥感影像</li>
                  <li>基础地质</li>
               </ul>
             <li id="业务专题">业务专题</li>
               <ul>
               <li>土地专题</li>
               <li>矿产专题</li>
                </ul>
             <li id="数据管理">数据管理</li>
                <ul>
               <li>土地管理</li>
               <li>矿产管理</li>
                </ul>
             </ul>
             */

            for (var i=0;i<result.oneNameLists.length;i++){
               var firstMenu = result.oneNameLists[i].name;

               var sli = "";
               sli+= '<li id="';
               sli+=firstMenu;
               sli+='"';
               sli+= 'οnclick="event.cancelBubble=true; queryTwoMenu(this.id)">'; //此处触发动态生成二级菜单事件,同时取消冒泡机制
               sli+= firstMenu;
               sli+= '</li>';
               var $li=$(sli);
               //添加到对应的节点后面
               $("#firstMenu_id").append($li);
            }
         }
           });
   }

   //点击生成二级菜单 根据一级菜单firstMenu查询二级菜单 ajax
       function queryTwoMenu(firstMenu){
      var url=base_path+"console/group/index2222";
      $.ajax({
         url:url,
         type:"post",
         data:{"firstMenu":firstMenu},
         datatype:"json",
         success:function (result) {
            //先清空li，防止AJAX异步加载重复生成
            $('#'+firstMenu +" ul").remove();
            for(var i=0;i<result.twoNameLists.length;i++){
               var twoMenu = result.twoNameLists[i].twoName;
               var twoId = result.twoNameLists[i].twoId;
               var sli = "";
               sli+= '<ul id="';
               sli+= twoMenu;
               sli+= '">';
               sli+= '<li id="';
               sli+=twoId;
               sli+='"';
               sli+= 'οnclick="event.cancelBubble=true; queryThreeMenu(this.id)">'; //此处触发动态生成二级菜单事件,同时取消冒泡机制
               sli+= twoMenu;
               sli+= '</li>';
               sli+= '</ul>';
               var $li=$(sli);
               //添加到对应的节点后面
               $('#'+firstMenu).append($li);
            }
         }
      });
   }

   //点击生成三级菜单 根据二级菜单twoId查询三级菜单 ajax
       function queryThreeMenu(twoId){
      var url=base_path+"console//group/ajax/fetch333";
      $.ajax({
         url:url,
         type:"post",
         data:{"parentId":twoId},
         datatype:"json",
         success:function (result) {
            //先清空li，防止AJAX异步加载重复生成
            $('#'+twoId+" ul").remove();
            for(var i=0;i<result.threeNameLists.length;i++){
               var threeMenu = result.threeNameLists[i].threeName;
               var sli = "";
               sli+= '<ul>';
               sli+= '<li id="';
               sli+=threeMenu;
               sli+='"';
               sli+= 'οnclick="">'; //此处触发动态生成二级菜单事件
               sli+= threeMenu;
               sli+= '</li>';
               sli+= '</ul>';
               var $li=$(sli);
               //添加到对应的节点后面
               $('#'+twoId).append($li);

            }
         }
      });
   }

</script>

<div class="show" id="login">
   <div class="show_set">
      <p style="text-align: right;"> <a οnclick="closeg();">关 闭</a> </p>
      <p><i></i><b>添加地图服务</b><i></i></p>
         <table  border="1" width="500px">
            <tr>
               <th width="60%">名称</th>
               <th width="40%">服务</th>
            </tr>
            <tr>
               <td>
                  <ul id="firstMenu_id">
                     <!-- 下面动态生成各级菜单-->
                  </ul>
               </td>
            </tr>
         </table>
   </div>
</div>

3.当时处理过程中卡住的问题：

  1）如何准确的动态生成各级菜单。解决：给各级菜单的节点 id 赋值为变量。

  2）如何防止异步刷新的时候重复生成，清空的节点选择没拼接正确。解决： $('#'+twoId+" ul").remove();

        注意：twoId 是变量，" ul"引号里面最前面有一个空格。

  3）生成三级菜单的时候，总是点不出来。解决：取消事件的冒泡机制。

4.事件：