ドロップダウンメニューを動的に作成する方法は？

Question

私はメニューを動的に作成しても問題ありません。 問題：クラスサブメニューが機能していません。アラートが表示されないためです。

私はliをハードコードし、それらを動的に作成しないと、サブメニューが機能します。私は、.NET

<script type="text/javascript"> 
     jQuery(document).ready(function() { 
      mostrarGrupo01(); 

      $(".submenu").click(function() { 
       alert("hola"); 
       $(this).children("ul").slideToggle(); 
      }) 

     }); 

function mostrarGrupo01() 
    { 
     var k = 0; 
     var grupo01; 
       $.ajax({ 
        type: "POST", 
        url: "Mesa.aspx/getGrupo01", 
        data: '{}', 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (response) { 
         grupo01 = response.d; 
         $('#grupos').empty(); 
         $.each(grupo01, function (index, BEGrupo) { 
          //var r = $('<input type="button" value="' + BEAreaCC.DSAREACC + '" id="' + BEAreaCC.CDAREACC + '" name="' + BEAreaCC.CDAREACC + '" style="font-size:xx-large" onclick="botonClick(this.id, this.name, this.title);"/> '); 
          //var t = $('<li class="submenu"><button type="button" name="' + BEGrupo.CDGRUPO01 + '" onclick="mostrarGrupo02(this.name, this.id);">' + BEGrupo.DSGRUPO01 + ' </button> <ul></ul> </li>'); 
          //var t = $('<li class="submenu"><button type="button" name="' + BEGrupo.CDGRUPO01 + '">' + BEGrupo.DSGRUPO01 + ' </button> <ul></ul> </li>'); 
          var t = $('<li class="submenu"><a href="#">' + BEGrupo.DSGRUPO01 + '</a></li>'); 
          $('#grupos').append(t); 
          k++; 
         }); 
        }, 
        failure: function (msg) { 
         $('#grupos').text(msg); 
        } 
       }); 
      } 
</script> 

HTML使用してい

：

<div class="contenedorMenu"> 
     <nav class="menu"> 
      <ul id="grupos"> 
      </ul> 
     </nav> 
</div> 

Answer 1

親クラスsubmenuでHTML要素をターゲットに結合あなたを変更するにはクリック.submenu要素を追加した後、あなたが.ajax成功コールバック内イベントをクリックしてバインドあなたのページに動的に追加されます。

$(".submenu").on('click',function() { 
    alert("hola"); 
    $(this).children("ul").slideToggle(); 
}); 

Answer 2

を.submenuが原因$.ajaxの非同期性にDOMに追加される前に、あなたは、クリックイベントをバインドしています。

1：

2つのオプションがあります。あなたはDOM

success: function (response) { 
    ... 
    $.each(grupo01, function (index, BEGrupo) { 
     ... 
    }); 

    $(".submenu").click(function() { 
     alert("hola"); 
     $(this).children("ul").slideToggle(); 
    }) 
}, 

2.それともul

$("#grupos").on('click', '.submenu', function() { 
    alert("hola"); 
    $(this).children("ul").slideToggle(); 
})