jQuery Uncaught TypeError：$（...）。tabs不是函数

-1

ASP.NET 4.5 WebForms。

我发现那么，人们似乎有这些同样问题的其他职位，但他们的答案并没有解决我的问题。这很奇怪，因为我在另一个页面上的标签仍然功能完美。

起初我还以为这个问题是通过加入一个像样的量在页面上隐藏代码造成的，但注释掉在我的Page_Load和Page_Init方法问题仍然存在的一切。

我已经尝试添加$（文件）到我的js调用。就绪文件以及无济于事...... 我看到this后，想看看我的问题有关，它不。从它出现，当我的剧本跑，所以我试着将它放在页面，没有任何变化的底部或者jQuery是没有加载浏览器检查看到的错误。然后，我尝试在Site.Master中使用捆绑包...仍然没有。我很难过。在这个网站的另一个页面上存在完全相同的设置，并且很好地加载了我在这个页面中打破了什么？

$(function() { 
 
    $("#tabs").tabs(); 
 
    $("#tabs").addClass("ui-tabs-vertical ui-helper-clearfix"); 
 
    $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 
 
});

/*#region Direct Reporting*/ 
 
.dd { 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
} 
 

 
div#dr_tab { 
 
    overflow:auto; 
 
    white-space: nowrap; 
 
} 
 

 
section#tables_container { 
 
    overflow: auto; 
 
    width: 2000px; 
 
} 
 

 
    section#tables_container div { 
 
     display: inline; 
 
     overflow:auto; 
 
    }  
 

 
    section#tables_container table { 
 
      display: inline; 
 
      float: left; 
 
      margin-bottom: 50px; 
 
      border: 1px solid #252525; 
 
      margin-right: 8px; 
 
      margin-top:10px; 
 
      width: auto; 
 
      white-space:nowrap; 
 
     } 
 

 
    section#tables_container table th { 
 
     padding-bottom: 5px; 
 
     padding-top: 10px; 
 
     column-span: all; 
 
    } 
 
/*#endregion*/ 
 

 
/*#region Contractor Time*/ 
 
div#ct_tab { 
 
    overflow: auto; 
 
} 
 
section#contractor_time { 
 
    overflow: auto; 
 
    width: 2000px; 
 
} 
 
     section#contractor_time_table table td { 
 
      white-space: nowrap; 
 
      padding-right: 10px; 
 
      padding-bottom: 5px; 
 
      text-align: center; 
 
     } 
 
/*#endregion*/ 
 

 
/*#region Manpower*/ 
 

 
section#manpower_dropdown { 
 
    text-align: center; 
 
} 
 

 
section#manpower_manage { 
 
    text-align: center; 
 
} 
 
section#manpower_manage label { 
 
    display: inline; 
 
} 
 

 
/*#endregion*/ 
 

 
/*#region Tabs*/ 
 
#tabs > div > h2 { 
 
    display: block; 
 
    text-align: center; 
 
    border-bottom: 2px solid #252525; 
 
    border-top: 2px solid #252525; 
 
} 
 

 
#tabs > ul > li > a { 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    border-left: 1px solid #252525; 
 
} 
 

 
.ui-tabs-vertical { 
 
    width: 55em; 
 
} 
 

 
    .ui-tabs-vertical .ui-tabs-nav { 
 
     float: left; 
 
     padding: .2em .1em .2em .1em; 
 
     width: 8em; 
 
    } 
 

 
     .ui-tabs-vertical .ui-tabs-nav > li { 
 
      clear: left; 
 
      width: 100%; 
 
      border-bottom-width: 1px !important; 
 
      border-right-width: 0 !important; 
 
      margin: 0 -1px .2em 0; 
 
     } 
 

 
      .ui-tabs-vertical .ui-tabs-nav > li > a { 
 
       display: block; 
 
       text-align: center; 
 
      } 
 

 
     .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { 
 
      padding-bottom: 0; 
 
      padding-right: .1em; 
 
      border-right-width: 1px; 
 
     } 
 

 
    .ui-tabs-vertical .ui-tabs-panel { 
 
     padding: 1em; 
 
     float: right; 
 
     width: 43em; 
 
     border-bottom: 2px solid #252525; 
 
     border-right: 2px solid #252525; 
 
     background-color: #F7F7F7; 
 
    } 
 

 
.ui-tabs .ui-tabs-hide { display: none !important; } 
 

 
.ui-tabs > ul { 
 
    list-style: none; 
 
} 
 

 
/*#endregion*/ 
 

 
.content_wrapper { 
 
    margin: 0 auto; 
 
    max-width: 1000px; 
 
} 
 

 
::-webkit-scrollbar { 
 
    height: 10px; 
 
} 
 
::-webkit-scrollbar-track { 
 
    background-color: #000; 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    background-color: #FFFF00; 
 
}

<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server"> 
 
    <link href="/Management/css/management.css" rel="stylesheet" type="text/css" /> 
 
    <%--<script src="/Management/scripts/management.js"></script>--%> 
 
</asp:Content> 
 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
 
    <section id="tabs"> 
 
     <ul> 
 
      <li><a href="#mp_tab">Manpower</a></li> 
 
      <li><a href="#ct_tab">Contractor Time</a></li> 
 
      <li><a href="#dr_tab">Direct Reports</a></li> 
 
     </ul> 
 
     <div id="mp_tab"> 
 
      <h2>Manpower</h2> 
 
      <asp:UpdatePanel ID="ManpowerPanel" runat="server" UpdateMode="Conditional"> 
 
       <ContentTemplate> 
 
        <section id="manpower_dropdown"> 
 
         <asp:DropDownList runat="server" ID="ManpowerDropDown" OnSelectedIndexChanged="ManpowerDropDown_SelectedIndexChanged" AutoPostBack="true"> 
 
          <asp:ListItem Text="All" Value="0" /> 
 
          <asp:ListItem Text="Contractors" Value="2" /> 
 
          <asp:ListItem Text="Zebra" Value="1" /> 
 
          <asp:ListItem Text="Terminated" Value="3" /> 
 
         </asp:DropDownList> 
 
         <asp:DropDownList runat="server" ID="ManpowerChooseUserDropdown" OnSelectedIndexChanged="ManpowerChooseUserDropdown_SelectedIndexChanged" AutoPostBack="true"> 
 
         </asp:DropDownList> 
 
         <asp:Button ID="ManpowerManageButton" Text="Manage" runat="server" OnClick="ManpowerManageButton_Click"/> 
 
        </section> 
 
        <section id="manpower_manage"> 
 
         <asp:UpdatePanel ID="ManpowerManagePanel" runat="server" UpdateMode="Conditional" Visible="false"> 
 
          <ContentTemplate> 
 
           <asp:CheckBox Text="New Hire" runat="server" ID="ManpowerManageNewHireCheckbox" AutoPostBack="true" ToolTip="Employee is new hire" OnCheckedChanged="ManpowerManageNewHireCheckbox_CheckedChanged" /> 
 
           <asp:CheckBox Text="Contractor" runat ="server" ID="ManpowerManageIsConCheckbox" AutoPostBack="false" ToolTip="Employee Contractor status" /> 
 
           <asp:CheckBox Text="D/I" runat="server" ID="ManpowerManageDirectCheckbox" ToolTip="If checked employee is Direct" /> 
 
           <asp:CheckBox Text="Active" runat="server" ID="ManpowerManageActiveCheckbox" ToolTip="If checked employee is Active" /> 
 
           <br /> 
 
           <asp:TextBox runat="server" ID="ManpowerManageCoreIdTextbox" AutoPostBack="false" ToolTip="Core ID" placeholder="Core ID.." ValidationGroup="ManpowerManage"/> 
 
           <asp:TextBox runat="server" ID="ManpowerManageFNameTextbox" AutoPostBack="false" ToolTip="Employee First Name" placeholder="First Name.." ValidationGroup="ManpowerManage"/> 
 
           <asp:TextBox runat="server" ID="ManpowerManageLNameTextbox" AutoPostBack="false" ToolTip="Employee Last Name" placeholder="Last Name.." ValidationGroup="ManpowerManage"/> 
 
           <asp:TextBox runat="server" ID="ManpowerManageBadgeTextbox" AutoPostBack="false" ToolTip="Employee Badge" placeholder="Badge #.." /> 
 
           <br />         
 
           <asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageCStartDateTextbox" AutoPostBack="false" ToolTip="Employee Contractor start date" /> 
 
           <asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageZStartDateTextbox" AutoPostBack="false" ToolTip="Employee Zebra start date" /> 
 
           <asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageTermDateTextbox" AutoPostBack="false" ToolTip="Employee Termination date" /> 
 
           <br /> 
 
           <asp:TextBox runat="server" ID="ManpowerManageTermReasonTextbox" AutoPostBack="false" ToolTip="Employee Termination Reason" Width="89%" placeholder="Termination Reason" /> 
 
           <br /> 
 
           <asp:DropDownList runat="server" ID="ManpowerManageSupDropdown" AutoPostBack="false" ToolTip="Supervisor of Employee" ValidationGroup="ManpowerManage"/> 
 
           <asp:DropDownList runat="server" ID="ManpowerManageShiftDropdown" AutoPostBack="false" ToolTip="Employee Shift" ValidationGroup="ManpowerManage"> 
 
            <asp:ListItem Text="--Shift--" /> 
 
            <asp:ListItem Text="Day" Value="0" /> 
 
            <asp:ListItem Text="Night" Value="1" /> 
 
           </asp:DropDownList> 
 
           <asp:DropDownList runat="server" ID="ManpowerManageTeamDropdown" AutoPostBack="false" ToolTip="Employee Team" ValidationGroup="ManpowerManage"/> 
 
           <br /> 
 
           <asp:Button ID="ManpowerManageCancelButton" Text="Cancel" runat="server" OnClick="ManpowerManageCancelButton_Click"/> 
 
           <asp:Button ID="ManpowerManageSubmitButton" Text="Submit" runat="server" OnClick="ManpowerManageSubmitButton_Click" ValidationGroup="ManpowerManage"/> 
 
           <br /> 
 
           <asp:RequiredFieldValidator ID="CoreIdCandidate" runat="server" ControlToValidate="ManpowerManageCoreIdTextbox" ErrorMessage="Core ID Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/> 
 
           <asp:RequiredFieldValidator ID="FirstNameCandidate" runat="server" ControlToValidate="ManpowerManageFNameTextbox" ErrorMessage="First Name Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" /> 
 
           <asp:RequiredFieldValidator ID="LastNameCandidate" runat="server" ControlToValidate="ManpowerManageLNameTextbox" ErrorMessage="Last Name Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" /> 
 
           <asp:RequiredFieldValidator ID="SupervisorCandidate" runat="server" ControlToValidate="ManpowerManageSupDropdown" ErrorMessage="Supervisor Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" /> 
 
           <asp:RequiredFieldValidator ID="ShiftCandidate" runat="server" ControlToValidate="ManpowerManageShiftDropdown" ErrorMessage="Shift Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/> 
 
           <asp:RequiredFieldValidator ID="TeamCandidate" runat="server" ControlToValidate="ManpowerManageTeamDropdown" ErrorMessage="Team Required" InitialValue="" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/>      
 
          </ContentTemplate> 
 
         </asp:UpdatePanel> 
 
        </section> 
 
        <section id="manpower_table"> 
 
         <asp:Table runat="server" ID="ManpowerTable" Width="100%"> 
 
          <asp:TableHeaderRow> 
 
           <asp:TableHeaderCell>Name</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Core ID</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Badge</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Team</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Supervisor</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Shift</asp:TableHeaderCell> 
 
          </asp:TableHeaderRow> 
 
         </asp:Table> 
 
        </section> 
 
       </ContentTemplate> 
 
      </asp:UpdatePanel> 
 
     </div> 
 
     <div id="ct_tab"> 
 
      <h2>Contractor Time Management</h2>    
 
      <asp:UpdatePanel runat="server" ID="ContractorTimePanel" UpdateMode="Conditional" Visible="true" Width="1000px"> 
 
       <ContentTemplate> 
 
        <section id="contractor_dropdown_container"> 
 
         <asp:DropDownList runat="server" ID="ContractorTimeDropdown" AutoPostBack="true" OnSelectedIndexChanged="ContractorTimeDropdown_SelectedIndexChanged" ToolTip="Select contractor name to view punches."> 
 
         </asp:DropDownList> 
 
         <asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorTimeRangeStart" AutoPostBack="false" ToolTip="Punch range start date." Width="175px" /> 
 
         <asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorTimeRangeStop" AutoPostBack="false" ToolTip="Punch range stop date." Width="175px"/> 
 
         <asp:Button runat="server" ID="SelectContractorForUpdateButton" Text="Edit Punches" ToolTip="Selects Contractor in dropdown to view punches and update if required. Optionally add start and end date ranges to narrow results." OnClick="SelectContractorForUpdateButton_Click" /> 
 
         <asp:Button ID="SelectContractorForTimeReportButton" Text="Time Report" runat="server" ToolTip="Selects Contractor in dropdown to view their time totals for a specified date range." OnClick="SelectContractorForTimeReportButton_Click" ValidationGroup="TimeReport"/> 
 
         <br /> 
 
         <asp:RequiredFieldValidator ID="ContractorCandidate" ErrorMessage="Choose Contractor to view their report!" InitialValue="" ControlToValidate="ContractorTimeDropdown" runat="server" SetFocusOnError="true" Display="Dynamic" ValidationGroup="TimeReport" Enabled="true" /> 
 
        </section> 
 
        <asp:UpdatePanel runat="server" ID="ContractorTimeEditPanel" UpdateMode="Conditional" Visible="false"> 
 
         <ContentTemplate> 
 
          <asp:DropDownList runat="server" ID="PunchIdDropdown" AutoPostBack="true" OnSelectedIndexChanged="PunchIdDropdown_SelectedIndexChanged" TootlTip="Select ID of punch to update."> 
 
          </asp:DropDownList> 
 
          <asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchInTextbox" Width="175px" ToolTip="Punch IN date/time."/> 
 
          <asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchOutTextbox" Width="175px" ToolTip="Punch Out date/time."/> 
 
          <asp:Label runat="server" ID="UpdatedByLabel"></asp:Label> 
 
          <asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchUpdatedDateTextbox" Width="175px" ToolTip="Select date/time punch was updated."/> 
 
          <asp:Button runat="server" ID="CancelUpdatePunchButton" Text="Cancel" OnClick="CancelUpdatePunchButton_Click"/> 
 
          <asp:Button runat="server" ID="UpdatePunchButton" Text="Submit" ToolTip="Submits updated punch data." OnClick="UpdatePunchButton_Click"/> 
 
          <asp:TextBox runat="server" ID="ContractorPunchUpdatedReasonTextbox" Width="100%" ToolTip="Reason punch was updated."/> 
 
         </ContentTemplate> 
 
        </asp:UpdatePanel> 
 
        <section id="contractor_time_table"> 
 
         <asp:Table runat="server" ID="ContractorTimeTable" Width="100%" Visible="true"> 
 
          <asp:TableHeaderRow> 
 
           <asp:TableHeaderCell>Punch ID</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Punch IN</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Punch OUT</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Updated BY</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Update DATE</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Update NOTES</asp:TableHeaderCell> 
 
          </asp:TableHeaderRow> 
 
         </asp:Table> 
 
         <asp:Table runat="server" ID="ContractorTimeReportTable" Width="100%" Visible="false"> 
 
          <asp:TableHeaderRow> 
 
           <asp:TableHeaderCell>Day</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Punches</asp:TableHeaderCell> 
 
           <asp:TableHeaderCell>Total Time</asp:TableHeaderCell> 
 
          </asp:TableHeaderRow> 
 
         </asp:Table> 
 
        </section> 
 
       </ContentTemplate> 
 
      </asp:UpdatePanel> 
 
     </div> 
 
     <div id="dr_tab"> 
 
      <h2>Direct Reports</h2> 
 
      <section id="tables_container"> 
 
       <asp:UpdatePanel runat="server" ID="DirectReportsPanel" UpdateMode="Conditional" CssClass="dd" Width="200px"> 
 
        <ContentTemplate> 
 
        </ContentTemplate> 
 
       </asp:UpdatePanel> 
 
      </section> 
 
     </div> 
 
    </section> 
 
</asp:Content>

我的Site.Master包含以下内容：

<head runat="server"> 
 
    <meta charset="utf-8" /> 
 
    <title><%: Page.Title %> - BSP</title> 
 
    <asp:PlaceHolder runat="server">  
 
     <%: Scripts.Render("~/bundles/modernizr") %> 
 
     <%: Scripts.Render("~/bundles/jquery") %> 
 
    </asp:PlaceHolder> 
 
    <webopt:BundleReference runat="server" Path="~/Content/css" /> 
 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" /> 
 
</head>

的webopt：BundleReference包含：

<bundles version="1.0"> 
 
    <styleBundle path="~/Content/css"> 
 
    <include path="~/Content/Site.css" /> 
 
    </styleBundle> 
 
    <styleBundle path="~/Content/themes/base/css"> 
 
    <include path="~/Content/themes/base/jquery.ui.core.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.resizable.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.selectable.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.accordion.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.autocomplete.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.button.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.dialog.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.slider.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.tabs.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.datepicker.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.progressbar.css" /> 
 
    <include path="~/Content/themes/base/jquery.ui.theme.css" /> 
 
    </styleBundle> 
 
</bundles>

编辑：jquery的束参考称为的Site.Master：

  // Add base/ui jQuery script library 
 
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 
       "~/Scripts/jquery-1.8.2.js", 
 
       "~/Scripts/jquery-ui-1.8.24.js"));

来源

2017-04-21 dbrad

其中是'jquery-ui.js'（或'jquery-ui.min.js'，或这些格式的编号版本）添加到页面？我看不到你的例子中的任何地方引用它。 'Scripts.Render（“〜/ bundles/jquery”）包含它吗？你没有向我们展示脚本包的代码，只有CSS。此外，主jQuery库需要包括以及jQuery的用户界面，并列入_before_ jQuery UI的。 – ADyson

哪里是你的jQuery包。还提供[mcve] –

很抱歉通过引用该软件包更新了该帖子。 – dbrad

我判定我被加载太多的元素与runat="server"，这可以仅具有发生在我的测试环境中，但我不希望我的产品稍后遇到问题。我将ct_tab内容移到它自己的表单中，这就解决了我的问题。这导致我解释了我在浏览器检查器中收到的错误。

$(...).tabs();无法找到元素，因为服务器没有在我的剧本跑了一次渲染页面。

来源

2017-04-21 16:20:01 dbrad

jQuery Uncaught TypeError：$（...）。tabs不是函数

回答

相关问题