Question

剃须刀里有foreach：

<ul>
    @foreach (var node in Model)
    {
        var par = node.Id;
        <li onclick="GetSubMenu(this)" id="@node.Id">
            @node.Title
        </li>
    }
</ul>

在onclick中我在：

中调用了方法

function GetSubMenu(e) {
    debugger;
    $.ajax({
        type: "Get",
        url: "/Menu/GetSubMenu",
        data: { parentId: e.id },
        contentType: "application/json; charset=utf-8",
        dataType: "json",

    }).done(function (result) {
        $.each(result, function (index, val) {               
            $("#" + val.ParentId).append("<ul><li onclick='GetSubMenu(this)' id='" + val.Id + "'>" + val.Title + "</li></ul>");

        });
    });
}

并在控制器中返回父菜单的子菜单（我点击它）：

   public JsonResult GetSubMenu(string parentId)
    {
        int id = int.Parse(parentId);
        return Json(db.PrmMenus.Where(x => x.ParentId == id), JsonRequestBehavior.AllowGet);
    }

第一次所有的东西都没问题，子菜单会正常显示，但在第二次点击子菜单时，onclick函数再次调用子菜单和父菜单，有什么问题？

Answer 1

问题是，当你点击子元素时，它正在调用子元素和父元素的onclick事件，因为子元素包含在父元素中！

您可以使用jQuery stopPropogation方法停止冒泡事件。此方法可防止事件冒泡DOM树，从而阻止任何父处理程序收到事件通知。

将您的代码转换为不显眼的javascript

<li class="menuItem" id="@node.Id">
     @node.Title
</li>

并使用＆＃34; menuItem＆＃34;听取项目上的click事件。类

$(function(){

   $(document).on("click",".menuItem",function(e){
       e.stopPropagation();

       var id=$(this).attr("id");
       ///Do your ajax call here
   });

});

确保在ajax方法的done事件（具有相同css类的事件）中为子元素构建相同类型的标记

Here is a working jsfiddle

只需单击一下，Onclick功能就会触发两次

1 个答案: