关于H-UI框架中 目录实现效果 class="menu_dropdown bk_2" 使用js字符串追加后js点击展开功能失效

正常网页代码如下， 在此页面中可以正常运行

<aside class="Hui-aside"> 
    <div class="menu_dropdown bk_2" id="hhhh"> 
      <dl>
        <dt> 
            <i class="Hui-iconfont">i>
             工程审核
            <i class="Hui-iconfont menu_dropdown-arrow">i>
        dt>
     <dd>
     <ul>
      <li><a id="waitConfirm" data-title="待审核（业务员）">待审核（业务员）a>li> 
      <li><a id="PreAuditing admin" data-title="待审核（管理员）">待审核（管理员）a>li>
      <li><a id="AlAuditing sales" data-title="已审核（业务员）">已审核（业务员）a>li>
      <li><a id="AlReject sales" data-title="已驳回（业务员）">已驳回（业务员）a> li>
       <li> <a id="AlAuditing All" data-title="公司已审核（全部）">公司已审核（全部）a>li> 
        ul>
         dd>
      dl>
       div> 
aside>

实现效果如下图：可以单击展开下方子目录

但是使用js将代码追加到div中时，追加上去后，样式可以显示出来，但是无法点击展开小目录。

 <script type="text/javascript">
           window.onload = function () {
               loadMenu();
           }
           function loadMenu() { 
            var str = '
 工程审核
 
待审核（业务员）
 待审核（管理员）
 
已审核（业务员）
已驳回（业务员） 
 
 公司已审核（全部） 
 
 

'; $("#hhhh").append(str); }

试了2天，第一，不是字符串错了。第二，不是追加的内容无法使用js。问了前辈，他的解释是HUI框架此处应该有问题，解决办法是，跳过该机制，手写js控制点击展开。
先将字符串加一个onclick()点击方法。

  var str = '<dl  id="menu_3"><dt class="" onclick="dis()"><i class="Hui-iconfont">i> 工程审核<i class="Hui-iconfont menu_dropdown-arrow">i>dt><dd id="dd2" style="display: none;"><ul> <li><a id="waitConfirmX" data-title="待审核（业务员）">待审核（业务员）a>li><li> <a id="PreAuditingX adminX" data-title="待审核（管理员）">待审核（管理员）a>li> <li><a id="AlAuditingX salesX" data-title="已审核（业务员）">已审核（业务员）a>li><li><a id="AlRejectX salesX" data-title="已驳回（业务员）">已驳回（业务员）a> li> <li> <a id="AlAuditingX AllX" data-title="公司已审核（全部）">公司已审核（全部）a> li>ul> dd> dl>div>';
function dis() {
                 var v= $('#dd2').css('display');
                 if(v=='none'){
                    $('#dd2').css('display','block');
                 }else{
                    $('#dd2').css('display','none');
                 }              
           }

但是，这样只能追加一个，所以必须要根据传id，而且id不能重复。