Как динамически создавать выпадающее меню?

Question

У меня нет проблем с созданием меню динамически. Моя проблема: подменю класса не работает. Я предполагаю, что это потому, что предупреждение не появляется.

Когда я жестко кодирую li's и не создаю их динамически, подменю работает.

Я использую .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

HTML-элемент с классом submenu добавляется на вашу страницу динамически. Таким образом, вы должны связать ваше событие следующим образом:

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

Answer 2

Вы связывание события щелчка, прежде чем .submenu добавляется в DOM из-за асинхронную природу $.ajax.

У вас есть два варианта:

1. Bind вы щелкаете событие в успех обратного вызова .ajax после добавления .submenu элементов в 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(); 
})