Bootstrap引发未捕获的错误：Bootstrap的JavaScript需要jQuery

172

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

Uncaught Error: Bootstrap's JavaScript requires jQuery

我尝试使用jQuery 1.9.0，尝试使用多个CDN上托管的副本，但是无法正常工作。有人可以指出我做错了吗？

— 慕尼·慕娜
source

28

在 Bootstrap 之前添加jQuery ...

— Adriano Repetti 2014年

就我而言，我在引导程序之前安装了jquery，然后，它运行良好。仅包含bootstrap之前并不能解决错误。

— Stuti Verma

我是我的情况，而不是在页脚中添加jquery（如引导模板）；我在标题中添加了它。解决了问题。

— Adeel Raza Azeemi

1

只需

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

在引导导入脚本之前添加即可。在此处复制最新的CDN：cdnjs.com/libraries/jquery

— Tina Lee

371

试试这个

更改文件的顺序，如下所示。

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

— 斯里达河
source

85

对我不起作用。我在Bootstrap之前有jQuery，反正得到错误！

— 格林

2

工作，但底部有一个水平滚动条

— HimalayanCoder

1

如果无法正常工作..可能是通过Bower安装了jQuery，因此您可能需要查看bower_components / jquery / dist / jquery.js ..“ dist”部分是我所忽略的部分。

— 贾克斯·卡瓦雷拉

为我工作的Django-Oscar项目。此错误开始突然出现。我想弄乱一个完全不相关的代码会改变渲染顺序并触发此错误。

— MadPhysicist

显然我没有注意到我将bootstrap.js包含了两次-第一次是在查询之前

— JJ Roman

91

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

如果您处于Node / CommonJS + Browser环境（例如，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因此您不需要此解决方法。

— OnurYıldırım
source

3

window.jQuery = window.$ = require('jquery');这对我尝试用jQuery 2和Bootstrap 3组装早午餐版本的工作

— 很有帮助，

1

我不知道，但是由于这不是错误，所以我不这么认为。如果您的电子应用不需要nodeIntegration，请将其设置为false，则您不需要此解决方法。

— OnurYıldırım16年

1

您必须npm install jquery不使用bower 安装jquery 。

— syodage

1

了解电子如何处理与基于窗口的应用程序不同的库很有用

— jwknz

我仍然不明白，但是Laravel使用相同的方法：github.com/laravel/laravel/blob/v5.7.0/resources/js/…–

— Ryan

14

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

— 124
source

7

您需要先添加JQuery，然后再添加bootstrap-

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

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

— Vivek Panday
source

4

您为JAVASCRIPT和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>

— 莫希特·辛格（Mohit Singh）
source

1

就我而言，解决方案确实很愚蠢，很奇怪。

下面的代码已由_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>

— 阿肖克·库马尔
source

1

我正在使用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-->

希望能帮助到你！您没有说您的环境是什么，所以我决定发布此答案。

— 尔纳尼
source

1

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

或者，您可以在加载父文件后进行从属文件加载。

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

— SantoshK
source

0

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

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

— 扎里菲斯
source

0

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

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

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

— 贾尼·德文（Jani Devang）
source

0

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

IE->设置->兼容性

— 达武特·古比兹
source

0

在官方文档上：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>

— 法比奥·索扎（Fabio Souza）
source

1

我使用代码“脚本”将其固定在angular.json上：[“ node_modules / jquery / dist / jquery.min.js”，“ node_modules / bootstrap / dist / js / bootstrap.min.js”]“

— AntWo

0

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

最后通过包含

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

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

— 卡尼卡
source

0

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

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

— Karisno1
source