jQuery Uncaught TypeError：$（...）。tabs不是一个函数
ASP.NET 4.5 WebForms。
我在SO上发现其他帖子，人们似乎也有同样的问题，但他们的答案并没有解决我的问题。这很奇怪，因为我在另一页上的标签仍能正常运作。
起初我认为这个问题是由于在页面上添加了相当多的代码隐藏引起的，但是在我的Page_Load和Page_Init方法中注释了问题仍然存在。
我尝试将$（document）.ready调用添加到我的js文件中也无济于事...... 我看到this发帖并试图查看我的问题是否相关，但事实并非如此。 从浏览器检查器中看到的错误看来，当我的脚本运行时，没有加载jQuery，所以我尝试将它放在页面的底部，没有变化。然后我尝试在Site.Master中使用bundle ...仍然没有。我很难过。在这个网站的另一个页面上存在完全相同的设置，并且加载了我打破这个页面的内容吗？
$(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"));
1 个答案:
答案 0 :(得分：2)
我确定我用runat="server"加载了太多元素，这可能只发生在我的测试环境中，但我不希望我的生产在以后遇到问题。我将ct_tab内容移动到它自己的形式，这解决了我的问题。这导致我解释了我在浏览器检查器中收到的错误。
$(...).tabs();无法找到该元素，因为在我的脚本运行时服务器没有将其呈现给页面。
相关问题
- 未捕获的TypeError：undefined不是函数 - 使用Jquery选项卡
- 未捕获的TypeError：$不是函数
- 未捕获的TypeError：$（...）。tabs不是一个函数
- 未捕获的TypeError：$（...）。pqSelect不是函数
- Uncaught typeerror ..不是一个函数
- 未捕获的TypeError *不是函数
- 未捕获的TypeError：$（...）。select2不是函数
- 未捕获的TypeError不是函数
- jQuery Uncaught TypeError：$（...）。tabs不是一个函数
- 未捕获的TypeError：e（...）。tabs不是函数
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？