I can't seem to get my js event fire successfully on elements that are found in partial views. It probably has something to do with the way the partial views are loaded, so the elements may not be in the DOM when document.ready is fired.

Clicking on the button only hides the element which is found in the main page (menu-panel2).

What approach to this am I missing?

Main 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();

  });
});

```

Partial View:

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

```