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

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

您有两种选择：

1。将.ajax元素添加到DOM

后，将.submenu成功回调中的单击事件绑定

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

如何动态创建下拉菜单？

2 个答案: