一键触发两次Onclick功能

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>

并使用“ menuItem”类监听项目的click事件

$(function(){

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

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

});

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

这是一个工作的jsfiddle