Bootstrap 抛出未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22658015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery
提问by Sridhar R
I am trying to use Bootstrap to make an interface for a program. I added jQuery 1.11.0 to the <head>tag and thought that was that, but when I launch the web page in a browser jQuery reports an error:
我正在尝试使用 Bootstrap 为程序制作界面。我在<head>标签中添加了 jQuery 1.11.0并认为就是这样，但是当我在浏览器中启动网页时 jQuery 报告一个错误：
Uncaught Error: Bootstrap's JavaScript requires jQuery
I have tried using jQuery 1.9.0, I have tried with copies hosted on several CDNs, but I can't get it work. Can anybody point out what I'm doing wrong?
我曾尝试使用 jQuery 1.9.0，也曾尝试使用托管在多个 CDN 上的副本，但无法正常工作。谁能指出我做错了什么？
回答by Sridhar R
Try this
尝试这个
Change the order of files it should be like below..
更改文件的顺序，它应该如下所示..
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
回答by Onur Y?ld?r?m
If you're in a Browser-Only environment, use SridharR's solution.
如果您处于仅浏览器环境中，请使用SridharR的解决方案。
If you're in a Node/CommonJS + Browser environment(e.g. electron, node-webkit, etc..); the reason for this error is that jQuery's export logic first checks for module, not window:
如果您在Node/CommonJS + 浏览器环境中（例如，electron、node-webkit 等）；此错误的原因是 jQuery 的导出逻辑首先检查module，而不是window：
if (typeof module === "object" && typeof module.exports === "object") {
// CommonJS/Node
} else {
// window
}
Note that it exports itself via module.exportsin this case; so jQueryand $are not assigned to window.
请注意，module.exports在这种情况下，它通过导出自身；sojQuery和$没有分配给window.
So to resolve this, instead of <script src="path/to/jquery.js"></script>;
所以要解决这个问题，而不是<script src="path/to/jquery.js"></script>;
Simply assign it yourself by a requirestatement:
只需通过require语句自己分配：
<script>
window.jQuery = window.$ = require('jquery');
</script>
NOTE: If your electron app does not need nodeIntegration, set it to falseso you won't need this workaround.
注意：如果您的电子应用程序不需要nodeIntegration，请将其设置为false这样您就不需要此解决方法。
回答by 124
you should load jquery first because bootstrap use jquery features. like this:
您应该首先加载 jquery，因为引导程序使用 jquery 功能。像这样：
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" src="css/animate.css">
<link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
<link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/custom.css">
<!-- Shuffle your scripts HERE -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<!-- End -->
<title>pyMeLy Interface</title>
</head>
<body>
<p class="title1"><strong>pyMeLy</strong></p>
<p class="title2"><em> A stylish way to view your media</em></p>
<div style="text-align:center;">
<button type="button" class="btn btn-primary">Movies</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
</div>
</body>
</html>
回答by Vivek Panday
You need to add JQuery before adding bootstrap-
您需要在添加引导程序之前添加 JQuery-
<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>
回答by Mohit Singh
You have provided wrong order for JAVASCRIPT and BOOTSTRAP
您为 JAVASCRIPT 和 BOOTSTRAP 提供了错误的顺序
by convention bootstrap must follow jquery file definition
按照约定引导程序必须遵循 jquery 文件定义
<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>
回答by Ashok kumar
In my case solution is really silly, and strange.
就我而言，解决方案真的很愚蠢，而且很奇怪。
Below code was pre-populated by _Layout.cshtml file. (NOT written by me)
下面的代码由 _Layout.cshtml 文件预先填充。（不是我写的）
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
But, when I verified in Scripts folder, jquery-1.10.2.min.js was not even available. Hence, replaced code like below where jquery-1.9.1.min.js is an existing file:
但是，当我在 Scripts 文件夹中验证时，jquery-1.10.2.min.js 甚至不可用。因此，替换如下代码，其中 jquery-1.9.1.min.js 是现有文件：
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
回答by Ernani
I'm using NodeJS and got the same error. Like the other answers, the problem was also because JQuery needed to be loaded before Bootstrap; however, because of the NodeJS characteristics, this change had to be aplied in the pipeline.js file.
我正在使用 NodeJS 并遇到相同的错误。像其他答案一样，问题也是因为需要在 Bootstrap 之前加载 JQuery；但是，由于 NodeJS 的特性，必须在pipeline.js 文件中应用此更改。
The change in pipeline.js was like this:
pipeline.js 的变化是这样的：
var jsFilesToInject = [
// Dependencies like jQuery, or Angular are brought in here
'js/dependencies/angular.1.3.js',
'js/dependencies/jquery.js',
'js/dependencies/bootstrap.js',
'js/dependencies/**/*.js',
];
I'm also using grunt to help, and it automatically changed the order in the main html page:
我也在使用 grunt 来帮忙，它会自动更改主 html 页面中的顺序：
<!--SCRIPTS-->
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/jquery.js"></script>
<script src="/js/dependencies/bootstrap.js"></script>
<!-- other dependencies -->
<!--SCRIPTS END-->
Hope it helps! You didn't said what your environment was, so I decided to post this answer.
希望能帮助到你！你没有说你的环境是什么，所以我决定发布这个答案。
回答by SantoshK
If you are using require.jsthan need to add
window.$ = window.jQuery = require('jquery')in app.js
如果你使用的require.js不是需要window.$ = window.jQuery = require('jquery')在 app.js 中添加
OR you can make dependent file load after parent file loaded.. such as below concept
或者您可以在加载父文件后加载依赖文件..例如下面的概念
require.config({
baseUrl: "scripts/appScript",
paths: {
'jquery':'jQuery/jquery.min',
'bootstrap':'bootstrap/bootstrap.min'
},
shim
shim: {
'bootstrap':['jquery'],
},
// kick start application
deps: ['app']
});
Above code shown that bootstrapis dependent on Jqueryso i have added in shimand make it dependent
上面的代码显示bootstrap依赖，Jquery所以我已经添加shim并使其依赖
回答by Davut Gürbüz
If this occurs IE intranet only, check compatibility settings and uncheck "Display intranet sites in Compatibility mode" .
如果这种情况仅发生在 IE Intranet，请检查兼容性设置并取消选中“以兼容模式显示 Intranet 站点”。
IE-->settings-->compatibility
IE-->设置-->兼容性
回答by kanika
I had tried almost all the above methods.
我已经尝试了几乎所有上述方法。
Finally fixed it by including the
最后通过包括
script src="{%static 'App/js/jquery.js' %}"
just after loading the staticfiles i.e {% load staticfiles %}in base.html
就在加载静态文件之后，即{% load staticfiles %}在 base.html 中
