Bootstrap кидає Uncaught Error: Bootstrap JavaScript вимагає 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 ...

— Adriano Repetti

У моєму випадку я встановив jquery перед завантажувальним пристроєм, і тоді він працював чудово. Просто включення до завантажувальної помилки не вирішило помилку.

— 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

— Тіна Лі

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 перед завантаженням і все одно отримаю помилку!

— Зелений

2

працював, але отримав горизонтальну смугу прокрутки внизу

— HimalayanCoder

1

Якщо з цього не працює. Можливо, jQuery встановлений через Bower, і тому вам може знадобитися заглянути під bower_components / jquery / dist / jquery.js .. частина "dist" - це те, що я не помітив.

— Jax Cavalera

Працював для мене над проектом «Джанго-Оскар». Ця помилка починає відображатися не блакитно. Я припускаю, що возитися з абсолютно неспорідненим кодом може змінити послідовність візуалізації та викликати цю помилку.

— MadPhysicist

мабуть, я не помітив, що я двічі включав bootstrap.js - перший раз це було до запиту

— JJ Roman

91

Якщо ви знаходитесь лише в середовищі браузера , використовуйте рішення SridharR .

Якщо ви перебуваєте в середовищі браузера Node / CommonJS + (наприклад, електрон, 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так, щоб вам не знадобилося це рішення.

— Onur Yıldırım
джерело

3

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

— rikkit

1

Я не знаю, але оскільки це не помилка, я не думаю. Якщо ваша електронна програма не потрібна nodeIntegration, встановіть її falseтак, щоб вам не знадобилося це рішення.

— Onur Yıldırım

1

Ви повинні встановити jquery, використовуючи npm install jqueryне з bower.

— сидоге

1

Корисно побачити, як електрон працює з бібліотеками, відмінними від програми, заснованої на

— вікнах

Я все ще не розумію цього, але 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
джерело

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>

— Вівек Пандай
джерело

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 цю зміну довелося застосувати у файлі 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-->

Сподіваюся, це допомагає! Ви не сказали, яке ваше оточення, тому я вирішив опублікувати цю відповідь.

— Ернані
джерело

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і зробив це залежним

— СантошК
джерело

0

Якщо ваш код виглядає добре, переконайтеся, що jQuery успішно завантажений на ваш сервер. У моєму випадку файли jQuery були опубліковані на сервері моїм IDE, але веб-сервер мав заглушку файлу 0 Кб. Без вмісту сервер не зміг подати файл у браузер.

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

— Зарефет
джерело

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 з кодом "" script ": [" 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

— каніка
джерело

0

Після боротьби з цією проблемою я зробив три кроки:

Використовуйте версії jQuery де-небудь між 1.9.0 та 3.0.0
Декларуйте файл jQuery, перш ніж оголосити файл Bootstrap
Оголосіть ці два файли сценаріїв внизу <body></body>тегів, а не в <head></head>. Вони працювали для мене, але можуть бути різні способи поведінки залежно від браузера, який ви використовуєте.

— Карісно1
джерело