MVC - Javascript 局部视图中元素的事件

Question

我似乎无法在部分视图中找到的元素上成功触发我的 js 事件。它可能与部分视图的加载方式有关，因此当 document.ready 被触发时，元素可能不在 DOM 中。

单击按钮只会隐藏在主页（菜单面板 2）中找到的元素。

我缺少什么方法？

主要Html:

<body>
  <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/main.js")" type="text/javascript"></script> 
  <div id="upper-menu-container">
    @{Html.RenderPartial("_Menu");}
  </div>
  <div id="upper-menu-container2">
    @{Html.RenderPartial("_Menu");}
  </div>
  <div id="header-wrapper"></div>
  <div id="menu-panel2">
   Hide me - Hide me
  </div>
  <div id="content">
    <input type="button" id="testbutton" value="click me" />
    @RenderBody()
  </div>
</body>
</html>

Main.js:

$(document).ready(function () {
  $("#testbutton").click(function () {
    $("#menu-panel").toggle();
    $("#menu-panel2").toggle();

  });
});

局部视图：

<div id="menu-panel">
  Hide me
</div>

Answer 1

啊...我刚刚发现问题，这是由于有两个相同的局部视图引起的，它们可能加载了几个与 DOM.

具有相同 ID 的元素

案件结案！

Answer 2

试着把这行写成：

<script src="@Url.Content("~/Scripts/main.js")" type="text/javascript"></script>

在文件末尾。

我有一些模板可以像这样工作。

MVC - Javascript 局部视图中元素的事件

MVC - Javascript events on elements in partial view

javascript

asp.net-mvc

partial-views