Question

我正在尝试使用Bootstrap为程序创建一个接口。我将jQuery 1.11.0添加到<head>标记，并认为就是这样，但是当我在浏览器中启动网页时，jQuery报告错误：

Uncaught Error: Bootstrap's JavaScript requires jQuery

我尝试过使用jQuery 1.9.0，我尝试过在几个CDN上托管的副本，但我无法使用它。任何人都可以指出我做错了吗？

Answer 1

试试这个

更改下面的文件顺序..

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

Answer 2

如果您使用的是仅浏览器环境，请使用SridharR的解决方案。

如果你在 Node / CommonJS + Browser环境（例如，电子，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，这样您就不会需要此解决方法。

Answer 3

你应该首先加载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>

Answer 4

您需要在添加bootstrap之前添加JQuery -

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

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

Answer 5

您提供了错误的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>

Answer 6

在我的情况下，解决方案真的很傻，很奇怪。

下面的代码是由_Layout.cshtml文件预先填充的。（不是我写的）

Choose arbitrary r
Calculate size(u) for all nodes
sum = 0
for each edge (u,v) do:
  sum = sum + (cost(u,v) * (size(v) * (n-size(v))))
return sum

但是，当我在Scripts文件夹中验证时，jquery-1.10.2.min.js甚至无法使用。因此，替换下面的代码，其中jquery-1.9.1.min.js是现有文件：

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

Answer 7

我使用NodeJS并得到了同样的错误。和其他答案一样，问题也是因为JQuery需要在Bootstrap之前加载;但是，由于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-->

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

Answer 8

如果您使用require.js而不是需要添加 app.js中的window.$ = window.jQuery = require('jquery')

OR 您可以在加载父文件后加载依赖文件..例如下面的概念

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并使其依赖

Answer 9

如果您的代码看起来不错，请验证jQuery是否已成功加载到您的服务器。就我而言，我的IDE将jQuery文件发布到服务器，但Web服务器只有0 KB的文件存根。没有内容，服务器无法将文件提供给浏览器。

重新发布文件并验证服务器实际收到整个文件后，我的网页停止给我错误。

Answer 10

在努力解决这个问题后，我采取了三个步骤：

在1.9.0和3.0.0之间的任何地方使用jQuery版本
在声明Bootstrap文件之前声明jQuery文件
在<body></body>标记的底部而不是<head></head>中声明这两个脚本文件。这些对我有用，但根据您使用的浏览器可能会有不同的行为。

Answer 11

你需要在添加bootstrap js文件之前添加JQuery js，因为BootStrap使用jqueries函数。因此，请确保先加载jquery js然后再加载bootstap js文件。

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

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

Answer 12

如果仅出现IE Intranet，请检查兼容性设置并取消选中“在兼容模式下显示Intranet站点”。

IE - ＆gt;设置 - ＆gt;兼容性

Answer 13

我曾尝试过几乎所有上述方法。

最后通过包含

来修复它

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

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

Answer 14

官方文件： 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>

Bootstrap抛出Uncaught Error：Bootstrap的JavaScript需要jQuery

14 个答案: