如何动态创建一个下拉菜单？

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

由于$.ajax的异步特性，您需要在将.submenu添加到DOM之前绑定click事件。

您有两种选择：

1。 将.submenu元素添加到DOM之后，将单击事件绑定到.ajax成功回调中

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();
})

Answer 2

带有类submenu的HTML元素会动态添加到您的页面中。 因此，您需要通过以下方式绑定事件：

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