Question

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

单击该按钮仅隐藏主页面中的元素（menu-panel2）。

我错过了什么方法？

主要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

啊......我刚刚发现了问题，这是由于有两个相同的部分视图引起的，这些部分视图可能会加载几个具有相同ID的元素到DOM。

案件结案！

Answer 2

尝试把这一行：

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

在文件的末尾。

我有一些模板就是这样的。

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

2 个答案: