jQuery甚至没有被调用 [英] jQuery not even being called

问题描述

我不知道这是怎么回事..我正在尝试在菜单上添加一张幻灯片...看起来非常简单..我已经尝试简化此操作以尝试发现问题(这意味着我已经删除了所有链接和额外的jquery，只保留了底部的示例-末尾的段落)，但我不知道错误是什么..(其他原因是它什么也不做)

I don't know what's going on here..I'm trying to add a slidetoggle on my menu .. seems very simple .. I've tried to simplify this to try and find the problem (meaning I've taken all the links out and extra jquery, to only have that bottom example - the paragraph at the end) but I don't know what the error is.. (other that it doesn't do anything)

包括:

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

推荐答案

您的代码必须位于document.ready处理程序中，因此$("button")选择器可以找到将click处理程序绑定到的元素.

Your code needs to be in a document.ready handler so the $("button") selector finds elements to bind click handlers to.

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

如果DOM尚未准备就绪，则<button>元素也可能不会添加/就绪，这意味着$("button")仍将绑定到它找到的所有元素...但是不会找到它们，导致您完全没有行为，这就是您所看到的.

If the DOM isn't ready yet, the <button> elements may not be added/ready either, which means that $("button") will still bind to all elements it finds...but it won't find them, resulting in a total lack of behavior, which is what you're seeing.

这篇关于jQuery甚至没有被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！