一鍵觸發兩次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