在jQuery中动态添加点击处理程序 [英] Dynamically adding a click handler in jQuery

问题描述

我有一个MVC应用程序，其中的顶部菜单是动态构建的，就像这样:

I have an MVC application in which the top menu is build dynamically like so:

 $.each(data, function (index, dataMenu) {
                if (i == 0) {
                    stringBuilder.push('<li class="home"><a href="#">' + dataMenu.MenuName + '</a></li>');
                    i++;
                }
                else {


                    stringBuilder.push('<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">' + dataMenu.MenuName + '</a>');
                    stringBuilder.push('<ul class="dropdown-menu">');
                    $.each(dataMenu.GetallMenus, function (index, submnu) {
                        stringBuilder.push('<li class=""><a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#content-area" href="' + submnu.MenuItemUrl + '">' + submnu.MenuName + '</a></li>');
                    });
                    stringBuilder.push('</ul>');
                    stringBuilder.push('</li>');
                }
            });
            stringBuilder.push('</ul>');
            $("#menu").append(stringBuilder.join(''));

_Layout.cshtml和document上的div标签中有一个加载器gif.准备好将其初始隐藏.

There's a loader gif in a div tag on _Layout.cshtml and on document.ready it's hidden initially.

我想做的是在每次单击菜单时显示该div.

What I am trying to do is to show that div on every menu click.

我该怎么做?

致谢.

推荐答案

您可以执行此操作，以避免为每个元素设置侦听器.

You could do this, to avoid setting the listener for each element.

$(document).on("click", "your target query", function(){
    // Your click logic
});

因此将导致:

$(document).on("click", "#menu li.someClass", function(){
    // Your click logic
});

这将在您动态添加或删除菜单项时起作用，并且只需调用一次即可.

This will work wether you add or remove menu items dynamically, and only needs to be called once.

这篇关于在jQuery中动态添加点击处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！