Bootstrap 抛出未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery [关闭]答案

【问题标题】：Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery [closed]Bootstrap 抛出未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery [关闭]
【发布时间】：2014-05-04 16:18:04
【问题描述】：

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

Uncaught Error: Bootstrap's JavaScript requires jQuery

我尝试过使用 jQuery 1.9.0，我尝试过托管在多个 CDN 上的副本，但我无法让它工作。谁能指出我做错了什么？

【问题讨论】：

包含 jQuery 之前 Bootstrap...
就我而言，我在引导之前安装了 jquery，然后它运行良好。只是在引导之前加入并不能解决错误。
我的情况，而不是在页脚中添加 jquery（如在引导模板中）；我在标题中添加了它。解决了问题。
只需在引导导入脚本之前添加<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
你在使用 Electron 吗？我在使用 Electron 时遇到了完全相同的问题，因为 jQuery 全局声明是在模块中完成的，而不是在 Wndows 中完成的。强制声明为全局 windows 对象：<script>window.$ = window.jQuery = require('./contents/jquery-3.5.1/jquery-3.5.1.js');</script> <script src="./contents/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script> 在此处找到解决方案：link

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

对我不起作用。我在 Bootstrap 之前有 jQuery 并得到了错误！
工作但底部有一个水平滚动条
如果它无法正常工作.. 可能是 jQuery 是通过 Bower 安装的，因此您可能需要查看 bower_components/jquery/dist/jquery.js .. “dist”部分是我忽略了什么。
为我的 Django-Oscar 项目工作。这个错误开始突然出现。我想弄乱一个完全不相关的代码会改变渲染顺序并触发这个错误。
显然我没有注意到我两次包含 bootstrap.js - 第一次是在查询之前

【解决方案2】：

如果您处于仅浏览器环境，请使用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，这样您就不需要此解决方法。

【讨论】：

window.jQuery = window.$ = require('jquery'); 这对我尝试使用 jQuery 2 和 Bootstrap 3 组装早午餐版本很有用。不过我只花了几个小时就找到了你的答案:(。这个要求在更高版本的 jQuery 中会改变吗?
我不知道，但由于这不是错误，我不这么认为。如果您的电子应用不需要nodeIntegration，请将其设置为false，这样您就不需要此解决方法。
您必须使用 npm install jquery 安装 jquery，而不是使用 bower。
有助于了解电子如何处理不同于基于窗口的应用程序的库
我还是没看懂，不过 Laravel 用的是一样的方法：github.com/laravel/laravel/blob/v5.7.0/resources/js/…

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

以下代码由 _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>

【讨论】：

【解决方案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-->

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

【讨论】：

【解决方案8】：

如果您使用的是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 并使其依赖

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案12】：

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

IE-->设置-->兼容性

【讨论】：

【解决方案13】：

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

【讨论】：

我用代码 " "scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min 将它固定在 angular.json .js"]"

【解决方案14】：

以上方法我都试过了。

最后通过包含

来修复它

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

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

【讨论】：