Bootstrap выбрасывает Uncaught Error: JavaScript Bootstrap требует jQuery [закрыто]

172

Закрыто. Этот вопрос нуждается в отладке деталей . В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме переполнения стека.

Закрыто 2 года назад .

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

Uncaught Error: Bootstrap's JavaScript requires jQuery

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

— Муним Манна
источник

28

Включите jQuery перед Bootstrap ...

— Адриано Репетти

В моем случае я установил jquery до начальной загрузки, а затем все заработало. Включение до загрузки не решило проблему.

— Stuti Verma

В моем случае вместо добавления jquery в нижний колонтитул (как в шаблоне начальной загрузки); Я добавил это в шапку. Решил проблему.

— Адель Раза Азими

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

— Тина Ли

373

Попробуй это

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

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

— Шридхар Р
источник

85

Не работает для меня У меня есть jQuery до Bootstrap и все равно получаю ошибку!

— Зеленый

2

работал, но получил горизонтальную полосу прокрутки внизу

— HimalayanCoder

1

Если это не работает из-за этого ... может быть, jQuery установлен через Bower, и поэтому вам может понадобиться заглянуть в bower_components / jquery / dist / jquery.js ... часть "dist" - это то, что я пропустил.

— Джакс Кавалера

Работал на меня для проекта Джанго-Оскар. Эта ошибка начала проявляться совершенно неожиданно. Я полагаю, что использование абсолютно не связанного кода может изменить последовательность рендеринга и вызвать эту ошибку.

— MadPhysicist

по-видимому, я не заметил, что я включил bootstrap.js дважды - впервые это было задолго до запроса

— JJ Roman

91

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

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

— Онур Йылдырым
источник

3

window.jQuery = window.$ = require('jquery');это сработало для меня, пытаясь собрать сборку с использованием jQuery 2 и Bootstrap 3. Мне потребовалось всего несколько часов, чтобы найти ваш ответ :(. Меняется ли это требование в более поздних версиях jQuery?

— rikkit

1

Я не знаю, но так как это не ошибка, я так не думаю. Если ваше электронное приложение не нужно nodeIntegration, установите его falseтак, чтобы вам не понадобился этот обходной путь.

— Онур Йылдырым

1

Вы должны установить JQuery, используя npm install jqueryне с беседкой.

— syodage

1

Полезно посмотреть, как электрон работает с библиотеками, отличными от оконного приложения

— jwknz

Я до сих пор не понимаю, но Laravel использует тот же подход: github.com/laravel/laravel/blob/v5.7.0/resources/js/…

— Райан,

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
источник

7

Вам нужно добавить JQuery перед добавлением начальной загрузки

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

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

— Вивек Пандай
источник

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>

— Мохит Сингх
источник

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>

— Ашок Кумар
источник

1

Я использую NodeJS и получил ту же ошибку. Как и другие ответы, проблема была также в том, что JQuery нужно было загрузить до Bootstrap; Однако, из - за характеристик NodeJS, это изменение должно было быть aplied в файле pipeline.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

Если вы используете, 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
источник

0

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

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

— Zarepheth
источник

0

Вам нужно добавить JQuery js перед добавлением js файла начальной загрузки, потому что BootStrap использует функцию jqueries. Поэтому обязательно загрузите сначала jquery js, а затем загрузочный файл js.

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

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

— Яни Деванг
источник

0

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

IE -> Настройки -> Совместимость

— Давут Гюрбюз
источник

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>

— Фабио Соуза
источник

1

Я исправил это в angular.json с помощью кода "" scripts ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

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

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

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

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

— Каника
источник

0

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

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

— Karisno1
источник