jQuery Uncaught TypeError: $(...).tabs 不是函数
Posted
技术标签:
【中文标题】jQuery Uncaught TypeError: $(...).tabs 不是函数【英文标题】：jQuery Uncaught TypeError: $(...).tabs is not a function 【发布时间】：2017-09-18 11:29:22 【问题描述】：ASP.NET 4.5 网络表单。
我在 SO 上发现了其他帖子，人们似乎也有同样的问题，但他们的回答并没有解决我的问题。这很奇怪，因为我在另一个页面上的标签仍然可以正常工作。
起初我认为问题是由于在页面上添加了大量代码隐藏引起的，但是在我的 Page_Load 和 Page_Init 方法中注释掉所有内容时问题仍然存在。
我也尝试将 $(document).ready 调用添加到我的 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>My 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>编辑：在 Site.Master 中调用 jquery 捆绑引用：
// 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"));【问题讨论】：
添加到页面的jquery-ui.js（或jquery-ui.min.js，或其中任何一种格式的编号版本）在哪里？我在您的示例中的任何地方都看不到它被引用。 Scripts.Render("~/bundles/jquery") 是否包含它？您没有向我们展示脚本包的代码，只有 CSS。另外，jQuery UI 和 jquery-ui 一样需要包含主 jQuery 库，并且包含 before jQuery UI。
你的 jquery 包在哪里。还提供minimal reproducible example
抱歉更新了帖子，引用了捆绑包。
该站点是在 ASP.NET 后端上运行的 Intranet 门户，我无法提供完整的工作示例道歉。
【参考方案1】：
我确定我使用 runat="server" 加载了太多元素，这可能只发生在我的测试环境中，但我不希望我的生产以后遇到问题。我将 ct_tab 内容移动到它自己的表单中，这解决了我的问题。这让我解释了我在浏览器检查器中收到的错误。
$(...).tabs(); 无法找到该元素，因为在我的脚本运行时服务器尚未将其呈现到页面。
【讨论】：
以上是关于jQuery Uncaught TypeError: $(...).tabs 不是函数的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Uncaught TypeError: $(...).tabs 不是函数
Jquery Uncaught TypeError: $(...).draggable is not a function [重复]
JQuery Uncaught TypeError：无法读取未定义的属性“重新加载”
jQuery Datatable Uncaught TypeError：无法读取未定义的属性“长度”
Uncaught TypeError: jQuery.i18n.browserLang is not a function
JQuery对象调用reset方法：Uncaught TypeError: $(...).reset is not a function