的onclick功能火災兩次點擊

我在剃刀有foreach：的onclick功能火災兩次點擊

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

第一次一切都好，子菜單將sho w正確，但在第二次當我點擊子菜單時，onclick函數再次調用子菜單和父菜單，這是什麼問題？

來源

2016-09-18 pejman

您需要停止'click'事件的傳播。你可以通過調用該事件的'stopPropagation（）'函數來實現。例如：'function GetSubMenu（event，e）{... event.stopPropagation（）;}'，'... onclick =「GetSubMenu（event，this）」......... – Titus

你是說請求當它已經加載子菜單嗎？你有沒有嘗試從父菜單中取消綁定一旦觸發事件？另一種方法是在父菜單中添加一個檢查來查看子菜單是否已經加載。 – jedifans

@ jedifans我的意思是說，當onclick爲總和菜單啓動時，它的所有父對象都被觸發了，我該如何解決這個問題？ – pejman

問題是，當你點擊子元素時，它調用子元素和父元素的onclick事件，因爲子元素包含在父元素中！

您可以使用jQuery stopPropogation方法來停止冒泡事件。此方法可防止事件冒泡DOM樹，從而阻止任何父處理程序通知事件。

轉換代碼，以不顯眼的JavaScript

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

，並聽取了click事件與「菜單項」類的項目

$(function(){ 

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

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

});

確保您建立同一類標記爲子元素在你的阿賈克斯方法的done事件（一個具有相同的css類）

Here is a working jsfiddle

來源

2016-09-18 16:28:48 Shyju

我這樣做，因爲你說，但在這個時候onclick函數只是要求父節點，當我點擊子節點的功能再次呼籲其父！ – pejman

現在！它應該工作正常。在這裏看到工作js小提琴http://jsbin.com/cefowirefo/edit?html,js,output – Shyju

的onclick功能火災兩次點擊

回答

相關問題