Wie man ein Dropdown-Menü dynamisch erstellt?

Question

Ich habe kein Problem, das Menü dynamisch zu erstellen. Mein Problem: Das Klassen-Untermenü funktioniert nicht. Ich nehme an, es liegt daran, dass die Warnung nicht erscheint.

Wenn ich die li's hart Code und nicht dynamisch erstellen, funktioniert das Untermenü.

Ich verwende .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

das HTML-Element mit Klasse Zielbindungs ​​submenu wird dynamisch zu Ihrer Seite hinzugefügt. Sie müssen daher Ihre Veranstaltung in der folgenden Art und Weise binden:

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

Answer 2

Sie das Click-Ereignis verbindlich vor .submenu auf das DOM hinzugefügt wird aufgrund der asynchronen Natur von $.ajax.

Sie haben zwei Möglichkeiten:

1. Binden Sie Ereignis innerhalb des .ajax Erfolg Rückruf klicken, nachdem Sie die .submenu Elemente auf das DOM

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

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

2. hinzufügen oder Ihre Klick ändern Sie die Eltern ul

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