title: how to dynamically create a dropdown menu?
body: <p>I have no problem creating the menu dynamically. 
  My problem : the class submenu is not working. I assume it's because the alert doesn't appear.</p>
  
  <p>When I hard code the li´s and do not create them dynamically, the submenu works.</p>
  
  <p>I'm using .NET</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          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 = $('&lt;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);"/&gt; ');
                              //var t = $('&lt;li class="submenu"&gt;&lt;button type="button" name="' + BEGrupo.CDGRUPO01 + '" onclick="mostrarGrupo02(this.name, this.id);"&gt;' + BEGrupo.DSGRUPO01 + ' &lt;/button&gt; &lt;ul&gt;&lt;/ul&gt; &lt;/li&gt;');
                              //var t = $('&lt;li class="submenu"&gt;&lt;button type="button" name="' + BEGrupo.CDGRUPO01 + '"&gt;' + BEGrupo.DSGRUPO01 + ' &lt;/button&gt; &lt;ul&gt;&lt;/ul&gt; &lt;/li&gt;');
                              var t = $('&lt;li class="submenu"&gt;&lt;a href="#"&gt;' + BEGrupo.DSGRUPO01 + '&lt;/a&gt;&lt;/li&gt;');
                              $('#grupos').append(t);
                              k++;
                          });
                      },
                      failure: function (msg) {
                          $('#grupos').text(msg);
                      }
                  });
              }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div class="contenedorMenu"&gt;
        &lt;nav class="menu"&gt;
              &lt;ul id="grupos"&gt;
              &lt;/ul&gt;
        &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>