【发布时间】：2026-02-09 12:10:02
【问题描述】：
在带有引导进度条的页面上出现错误：
$(...).progressbar 不是函数
正如我所见，这个错误似乎正在使我的其余脚本崩溃：
- Typeahead 不能在同一页面上工作 我收到以下错误：
猎犬没有定义
- 引导选择不起作用
- Web 模板不起作用
有趣的是，如果我的 enable.optimization 设置为 false，我的其余脚本不会崩溃。
下面是我的HTML 和javascript 的进度条：
function UpdateProgress(totalRecords, recordsProcessed, message) {
var pct = recordsProcessed / totalRecords * 100;
$('.progress-bar').css('width', pct + '%').attr('aria-valuenow', pct);
$('#message').text(message);
var msg = Math.round(pct, 2) + '% Complete';
$('.progText').text(msg);
if (pct > 0) {
$('#progressRow').show();
}
if (pct == 100) {
$('#progressRow').hide();
}
}
<div id="progressRow" class="row" >
<div class="form-group">
<div class="col-md-offset-2 col-sm-offset-2 col-md-10 col-sm-10 col-xs-12">
<label id="message"></label>
<div class="progress" style="height: 30px">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="progText"></span>
</div>
</div>
</div>
</div>
</div>
以下是我的bundleConfig 文件：
bundles.Add(new ScriptBundle("~/Scripts/jquery").Include(
"~/Scripts/jquery.min.js"
));
bundles.Add(new StyleBundle("~/Content/core").Include(
"~/Content/bootstrap.min.css",
"~/Content/animate.min.css",
"~/Content/custom.min.css",
"~/Content/font-awesome.min.css",
"~/Content/green.css",
"~/Content/outline.button.css",
"~/Content/bootstrap-datepicker.min.css",
"~/Content/Pagination.css",
"~/Content/animation.css",
"~/Content/jBox.css",
"~/Content/SpinnerOverLay.css",
"~/Content/bootstrap-select.min.css",
"~/Content/typeahead.css",
"~/Content/icheck/square/green.css",
"~/Content/icheck/green.css"
));
bundles.Add(new StyleBundle("~/Content/login").Include(
"~/Content/bootstrap.min.css",
"~/Content/font-awesome.min.css",
"~/Content/animate.min.css",
"~/Content/custom.min.css",
"~/Content/green.css",
"~/Content/animation.css",
"~/Content/jBox.css",
"~/Content/SpinnerOverLay.css"
));
bundles.Add(new ScriptBundle("~/Scripts/core").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/custom.min.js",
"~/Scripts/nprogress.min.js",
"~/Scripts/bootstrap-datepicker.min.js",
"~/Scripts/jquery.bpopup.min.js",
"~/Scripts/bootstrap-select.min.js",
"~/Scripts/typeahead.min.js",
"~/Scripts/icheck/icheck.min.js"
));
bundles.Add(new ScriptBundle("~/Scripts/login").Include(
"~/Scripts/jquery.bpopup.min.js"
));
bundles.Add(new ScriptBundle("~/Scripts/SignalR").Include(
"~/Scripts/jquery.signalR-2.2.0.min.js"
));
BundleTable.EnableOptimizations = false;
这就是css 和js 文件在masterPage 中的引用方式：
<head runat="server">
<title>Stores</title>
<%: System.Web.Optimization.Styles.Render("~/Content/core") %>
<%: System.Web.Optimization.Scripts.Render("~/Scripts/jquery") %>
<%:System.Web.Optimization.Scripts.Render("~/Scripts/core") %>
<script src="/Scripts/notify/pnotify.buttons.min.js"></script>
<script src="/Scripts/notify/pnotify.core.min.js"></script>
<script src="/Scripts/notify/pnotify.nonblock.min.js"></script>
<script src="/Scripts/init.controls.js"></script>
<script src="/Scripts/showDisplayModalSetup.js"></script>
<script src="/Scripts/client.validation.js"></script>
【问题讨论】：
-
您是在提到通过 bundle 加载脚本并出现错误？请详细说明这一点
-
我正在使用 asp 优化选项 - 捆绑和缩小。所以我创建了我的包并在我的站点管理员中引用了它们。当 enable.optimization 设置为 false 时，该站点运行良好。但是一旦我启用优化，我就会面临上述情况
-
你有最新的 jquery 和 bootstrap 版本吗？ Jquery 2.2 和 Bootstrap 3.3？
-
是的，我尝试了最新的 jquery 和 bootstrap，但效果不佳
-
这只是顺序问题您必须正确订购css和js链接。
标签： asp.net twitter-bootstrap optimization