的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功能火灾两次点击

回答

相关问题