Bootstrap выбрасывает Uncaught Error: JavaScript Bootstrap требует jQuery

145

Я пытаюсь использовать Bootstrap для создания интерфейса для программы. Я добавил jQuery 1.11.0 в <head> и подумал, что это так, но когда я запускаю веб-страницу в браузере, jQuery сообщает об ошибке:

Uncaught Error: Bootstrap JavaScript requires jQuery

Я пытался использовать jQuery 1.9.0, я пытался с копиями, размещенными на нескольких CDN, но я не могу заставить его работать. Кто-нибудь может указать, что я делаю не так?

  • 26
    Включить jQuery перед загрузкой ...
  • 0
    В моем случае я установил jquery до начальной загрузки, а затем все заработало. Включение до загрузки не решило проблему.
Теги:
twitter-bootstrap-3

15 ответов

326
Лучший ответ

Попробуйте это

Измените порядок файлов, которые должны быть как ниже.

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
Поделиться
  • 70
    Не работает для меня У меня есть jQuery до Bootstrap и все равно получаю ошибку!
  • 2
    работал, но получил горизонтальную полосу прокрутки внизу
Показать ещё 2 комментария
71

Если вы находитесь в среде только для браузера, используйте решение SridharR.

Если вы находитесь в среде браузера Node/CommonJS + (например, электрон, узел-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 чтобы вам не понадобился этот обходной путь.

Поделиться
  • 1
    window.jQuery = window.$ = require('jquery'); это сработало для меня, пытаясь собрать сборку с использованием jQuery 2 и Bootstrap 3. Мне потребовалось всего несколько часов, чтобы найти ваш ответ :(. Меняется ли это требование в более поздних версиях jQuery?
  • 0
    Я не знаю, но так как это не ошибка, я так не думаю. Если ваше электронное приложение не нуждается в nodeIntegration , установите для него значение false чтобы вам не понадобился этот обходной путь.
Показать ещё 4 комментария
11

вы должны сначала загрузить 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>
Поделиться
6

Вам нужно добавить JQuery перед добавлением бутстрапа -

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

<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>
Поделиться
2

Вы указали неправильный заказ для 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>
Поделиться
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 и сделать его зависимым

Поделиться
1

Я использую NodeJS и получил ту же ошибку. Как и другие ответы, проблема заключалась также в том, что JQuery нужно было загружать до Bootstrap; однако из-за характеристик NodeJS это изменение должно было быть использовано в файле pipe.js.

Изменение в файле pipe.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-->

Надеюсь, это поможет! Вы не сказали, какова была ваша среда, поэтому я решил опубликовать этот ответ.

Поделиться
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>
Поделиться
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>
Поделиться
  • 0
    Я исправил это в angular.json с помощью кода "" scripts ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"
0

Я перепробовал почти все вышеперечисленные методы.

Наконец исправил это, включив

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

сразу после загрузки статических файлов, т.е. {% load staticfiles %} в base.html

Поделиться
0

Для меня у меня был JQuery перед Bootstrap, но версия, которая была несовместима.

Смотрите twitter bootstrap 3 минимальная версия jquery

Я использовал Bootstrap Beta 4, и он работает с jquery 1.12.4, но не 3.2.1.

Поделиться
0

Если это происходит только в интрасети IE, проверьте настройки совместимости и снимите флажок "Отображать сайты интрасети в режиме совместимости".

IE → настройки → совместимость

Изображение 2370

Поделиться
0

Вам нужно добавить JQuery js перед добавлением файла bootstrap 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>
Поделиться
0

После борьбы с этой проблемой я сделал три шага:

  1. Используйте версии jQuery между 1.9.0 и 3.0.0
  2. Объявите файл jQuery перед объявлением файла Bootstrap
  3. Объявите эти два файла сценария в нижней части тегов <body></body> а не в <head></head>. Это сработало для меня, но может быть другое поведение в зависимости от браузера, который вы используете.
Поделиться
0

Если ваш код выглядит хорошо, убедитесь, что jQuery успешно загружен на ваш сервер. В моем случае файлы jQuery были опубликованы на сервере с помощью моей IDE, но веб-сервер имел только заглушку файла 0 КБ. Без содержимого сервер не смог отправить файл в браузер.

После повторной публикации файла и проверки того, что сервер фактически получил весь файл, моя веб-страница перестала выдавать мне ошибку.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню