如何动态创建下拉菜单？

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.

我动态创建菜单没问题。我的问题:类子菜单不起作用。我认为这是因为警报没有出现。

When I hard code the li´s and do not create them dynamically, the submenu works.

当我硬编码li并且不动态创建它们时,子菜单可以工作。

I'm using .NET

我正在使用.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>

2 个解决方案

#1

The HTML element with class submenu is added to your page dynamically. You therefore need to bind your event in the following way:

具有类子菜单的HTML元素将动态添加到页面中。因此,您需要以下列方式绑定事件:

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

#2

You are binding the click event before .submenu is added to the DOM due to the asynchronous nature of $.ajax.

由于$ .ajax的异步性质,在.submenu添加到DOM之前绑定click事件。

You have two options:

你有两个选择:

1 . Bind you click event within the .ajax success callback after you add the .submenu elements to the DOM

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

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

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

2. Or change your click binding to target the parent ul

2.或者更改您的点击绑定以定位父级ul

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

#1