Bootstrap 抛出 Uncaught Error: Bootstrap's JavaScript requires jQuery

我试图使用Bootstrap 创建程序接口。我添加了 jQuery 1.11.0 到标签，并认为已经可以了，但当我在浏览器中启动网页，jQuery 报告一个错误:

Uncaught Error: Bootstrap's JavaScript requires jQuery

我已经尝试使用jQuery 1.9.0，我已经尝试在几个 CDN 上的托管副本，但它还是不能正常工作。有人能指出我做错了什么吗?

497803 次浏览
小开
最佳答案

试试这个

更改文件的顺序应该如下所示..

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
小开
你应该首先加载jquery，因为bootstrap使用jquery特性。 这样的:< / p > 
<!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>
小开

你为JAVASCRIPT和BOOTSTRAP提供了错误的顺序

按照惯例，bootstrap必须遵循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>
小开

在添加bootstrap-之前，需要先添加JQuery

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>


<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>
小开

如果你在浏览器只环境中，使用SridharR的解决方案。

如果你在Node/CommonJS +浏览器环境中(例如electron, node-webkit等);出现这个错误的原因是jQuery的导出逻辑首先检查module，而不是window:

if (typeof module === "object" && typeof module.exports === "object") {
// CommonJS/Node
} else {
// window
}

注意，在这种情况下，它通过module.exports导出自己;所以jQuery和$没有被赋值给window。

所以要解决这个问题，不用<script src="path/to/jquery.js"></script>;

简单地通过require语句自己赋值:

<script>
window.jQuery = window.$ = require('jquery');
</script>

注意:如果你的电子应用程序不需要nodeIntegration，将它设置为false，这样你就不需要这个解决方法了。

小开

如果代码看起来不错，请验证jQuery是否成功加载到服务器。在我的例子中，jQuery文件是由我的IDE发布到服务器的，但是web服务器只有一个0 KB的文件存根。由于没有内容，服务器无法将文件提供给浏览器。

在重新发布文件并验证服务器实际上接收了整个文件后，我的网页不再向我提供错误。

小开

在解决了这个问题之后，我采取了三个步骤:

  1. 使用jQuery 1.9.0到3.0.0之间的任何版本
  2. 在声明Bootstrap文件之前声明jQuery文件
  3. 声明这两个脚本文件在<body></body>标签的底部，而不是在<head></head>. xml标签的底部。 这些对我来说很有效，但可能会有不同的行为，这取决于你所使用的浏览器
小开

在我看来，这个解决方案真的很愚蠢，也很奇怪。

下面的代码由_Layout预填充。cshtml文件。(不是我写的)

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

但是，当我在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>
小开

在添加bootstrap js文件之前，需要先添加JQuery js，因为bootstrap使用jqueries函数。所以请确保首先加载jquery js，然后引导js文件。

<!-- JQuery Core JavaScript -->
<script src="app/js/jquery.min.js"></script>


<!-- Bootstrap Core JavaScript -->
<script src="app/js/bootstrap.min.js"></script>
小开

我正在使用NodeJS，得到了同样的错误。和其他答案一样，这个问题也是因为在Bootstrap之前需要加载JQuery;然而，由于NodeJS的特性，这个更改必须应用在pipeline.js文件. xml中。

在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',
];

我还使用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-->

希望能有所帮助!你没有说你的环境是什么，所以我决定发布这个答案。

小开

如果这种情况只发生在IE内网，请检查兼容性设置并取消选中“以兼容性模式显示内网站点”。

IE - >设置- >兼容性

enter image description here

小开

以上的方法我几乎都试过了。

最后通过包含

script src="{%static 'App/js/jquery.js' %}"

在base.html中加载静态文件，即{% load staticfiles %}之后

小开

在官方文档: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron < / p > 

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
小开

如果你正在使用require.js，那么需要添加 window.$ = window.jQuery = require('jquery')在app.js

< p >或 你可以让从属文件加载后，父文件加载..如以下概念

require.config({
baseUrl: "scripts/appScript",
paths: {
'jquery':'jQuery/jquery.min',
'bootstrap':'bootstrap/bootstrap.min'
},
shim
shim: {
'bootstrap':['jquery'],
},


// kick start application
deps: ['app']
});

上面的代码显示bootstrap依赖于Jquery，所以我添加了shim并使其依赖


提交答案