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") 仍将绑定到它找到的所有元素...但是它找不到它们，导致完全缺乏行为，这就是您所看到的。

Answer 2

您需要将其包装为加载方法：

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

Answer 3

尝试过这样的事情吗？

jQ = jQuery.noconflict();

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

也许 asp 正在弄乱你的 $