title: Onclick function fires Twice with one click
body: <p>I have a <code>foreach</code>in the razor :</p>
  
  <pre><code>&lt;ul&gt;
      @foreach (var node in Model)
      {
          var par = node.Id;
          &lt;li onclick="GetSubMenu(this)" id="@node.Id"&gt;
              @node.Title
          &lt;/li&gt;
      }
  &lt;/ul&gt;
  </code></pre>
  
  <p>in onclick i called method in the :</p>
  
  <pre><code>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("&lt;ul&gt;&lt;li onclick='GetSubMenu(this)' id='" + val.Id + "'&gt;" + val.Title + "&lt;/li&gt;&lt;/ul&gt;");
  
          });
      });
  }
  </code></pre>
  
  <p>and in controller i return the submenu of parent menu(which i click on it):</p>
  
  <pre><code>   public JsonResult GetSubMenu(string parentId)
      {
          int id = int.Parse(parentId);
          return Json(db.PrmMenus.Where(x =&gt; x.ParentId == id), JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>the first time all thing was ok, and the sub menu will show properly, but in seccond time when i click on submenu, the onclick function call for submenu and the parent menu again, what is the problem?</p>