jQuery 甚至没有被调用

Question

我不知道这里发生了什么..我正在尝试在我的菜单上添加一个滑动切换..看起来很简单..我试图简化它以尝试找到问题（意味着我已经取出所有链接和额外的 jquery，只有那个底部示例 - 最后的段落）但我不知道错误是什么..（其他它没有做任何事情）

包括：

<script type="text/javascript" src="/raceday/Scripts/jquery-1.4.2.min.js"></script> 

脚本：

<script type="text/javascript">
$("button").click(function() {
    $("p").slideToggle("slow");
});    

HTML：

<div class="ttl-area">
   <h2 class="ttl-account"><span>Account</span></h2>
</div>
<div class="account-area">
   <div class="login-holder">

      <p><strong>Welcome, <%= ViewModel.Profile.Name.First %></strong></p>

      <ul class="account-links">
         <span id="loginTitle">User Options</span><br /><br />
         <li>
            <%= Html.ActionLink<EventController>( x => x.List(), "All Events" )%>
         </li>
         <li>
            <%= Html.ActionLink<MyEventsController>( x => x.List(), "My Events" )%>
         </li>
         <li>
            <%= Html.ActionLink<AccountController>( x => x.Edit(), "My Profile" )%>
         </li>
         <li>
            <%= Html.ActionLink<ClubController>( x => x.List(), "All Clubs" )%>
         </li>
         <li>
            <%= Html.ActionLink<MyClubsController>( x => x.List(), "My Clubs" )%>
         </li>
         <li>
            <%= Html.ActionLink<AccountController>( x => x.ChangePassword(), "Change My Password" )%>
         </li>
         <li>
            <%= Html.ActionLink<DependantController>( x => x.List(), "My Dependants" ) %>
         </li>

      </ul>
   </div>
  <% if ( ViewModel.Profile.HasOrganizerInfo ) { %>
  <div class="login-holder">
     <ul class="account-links">
        <span id="loginTitle">Organizer Details</span><br /><br />
        <li>
           <%= Html.ActionLink<AccountController>( x => x.Organizer(), "Organizer Details" )%>
        </li>
        <li>
           <%= Html.ActionLink<EventController>( x => x.Edit( default(int?) ), "Post An Event" )%>
        </li>
        <li>
           <%= Html.ActionLink<EventAdminController>( x => x.List(), "Events Created By Me" ) %>
        </li>
        <li>
           <%= Html.ActionLink<ClubController>( x => x.Edit( default( int? ) ), "Create A Club" )%>
        </li>
        <li>
           <%= Html.ActionLink<ClubAdminController>( x => x.List( ), "Clubs Created By Me" )%>
        </li>
         <!-- if ( ViewModel.Profile.IsAdministrator ) { -->
         <li>
            <%= Html.ActionLink<EventReportController>( x => x.List(), "Event Report" ) %>
         </li>
         <!-- } -->
     </ul>
  </div>
  <% } %>
  <% if ( ViewModel.Profile.HasTimerInfo ) { %>
  <div class="login-holder">
     <ul class="account-links">
        <span id="loginTitle">Timer Details</span><br /><br />
        <li>
           <%= Html.ActionLink<AccountController>( x => x.Timer(), "Timer Details" )%>
        </li>
        <li>
           <%= Html.ActionLink<EventTimerController>( x => x.List(), "Events Timed By Me" ) %>
        </li>
     </ul>
  </div>
  <% } %>
      <ul class="account-links">
      <% if ( ( !ViewModel.Profile.HasOrganizerInfo ) || ( !ViewModel.Profile.HasTimerInfo) ) { %>   
         <span id="loginTitle">Additional Options</span><br /><br />
      <% } %>         
         <% if ( !ViewModel.Profile.HasTimerInfo ) { %>
            <li>
               <%= Html.ActionLink<AccountController>( x => x.Timer(), "I Time Events" )%>
            </li>
         <% } %>

         <% if ( !ViewModel.Profile.HasOrganizerInfo ) { %>
            <li>
               <%= Html.ActionLink<AccountController>( x => x.Organizer(), "I Organize Events" )%>

            </li>
         <% } %>

            <li><%= Html.ActionLink<AccountController>( x => x.Logout(), "Log Out" ) %></li>
      </ul>

</div>
        <button>Hide 'em</button>

  <p>Hiya</p>
  <p>Such interesting text, eh?</p>

Answer 1

您的代码需要在document.ready 处理程序中，以便$("button") 选择器找到将click 处理程序绑定到的元素。

$(function() {
  $("button").click(function() {
    $("p").slideToggle("slow");
  });   
});

如果 DOM 还没有准备好，<button> 元素可能还没有添加/准备好，这意味着 $("button") 仍然会绑定到它找到的所有元素...但是 它不会找到他们，导致完全没有行为，这就是你所看到的。