我试图使用Bootstrap使一个程序的接口。我添加了jQuery 1.11.0到<head>标签,并认为这是,但当我在浏览器中启动网页jQuery报告一个错误:
Uncaught Error: Bootstrap's JavaScript requires jQuery
我已经尝试使用jQuery 1.9.0,我已经尝试在几个cdn上托管副本,但我不能让它工作。有人能指出我做错了什么吗?
我试图使用Bootstrap使一个程序的接口。我添加了jQuery 1.11.0到<head>标签,并认为这是,但当我在浏览器中启动网页jQuery报告一个错误:
Uncaught Error: Bootstrap's JavaScript requires jQuery
我已经尝试使用jQuery 1.9.0,我已经尝试在几个cdn上托管副本,但我不能让它工作。有人能指出我做错了什么吗?
当前回答
如果代码看起来不错,请验证jQuery是否成功加载到服务器。在我的例子中,jQuery文件是由我的IDE发布到服务器的,但是web服务器只有一个0 KB的文件存根。由于没有内容,服务器无法将文件提供给浏览器。
在重新发布文件并验证服务器实际上接收了整个文件后,我的网页不再向我提供错误。
其他回答
你应该首先加载jQuery,因为Bootstrap使用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>
在解决了这个问题之后,我采取了三个步骤:
使用jQuery 1.9.0到3.0.0之间的任何版本 在声明Bootstrap文件之前声明jQuery文件 将这两个脚本文件声明在<body></body>标签的底部,而不是在<head></head>。 这些方法对我来说很有效,但是基于你所使用的浏览器可能会有不同的行为。
你为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>
官方文件: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
我正在使用NodeJS,得到了同样的错误。和其他答案一样,这个问题也是因为在Bootstrap之前需要加载JQuery;然而,由于NodeJS的特性,这个更改必须应用在pipeline.js文件中。
在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-->
希望能有所帮助!你没有说你的环境是什么,所以我决定发布这个答案。