it-swarm.com.ru

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

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

Uncaught Error: Bootstrap's JavaScript requires jQuery

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

149
user3327457

Попробуй это 

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

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

Если вы находитесь в среде Browser-Only, используйте решение SridharR .

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

76
Onur Yıldırım

вы должны сначала загрузить 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>
11
N J

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

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

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

Вы предоставили неправильный заказ для 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>
2
Mohit Singh

В моем случае решение действительно глупое и странное.

Ниже код был предварительно заполнен файлом _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
Ashok kumar

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

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

На официальных документах: 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
Fabio Souza

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

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

0
Zarepheth

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

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

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

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

0
kanika

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

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

 enter image description here

0
Davut Gürbüz

Вам нужно добавить JQuery js перед добавлением js-файла начальной загрузки, потому что BootStrap использует функцию jquery. Поэтому обязательно загрузите сначала 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
Jani Devang

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

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