Bootstrap выдает ошибку Uncaught: JavaScript Bootstrap требует jQuery [закрыт]

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

Uncaught Error: Bootstrap's JavaScript requires jQuery

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

142
css html jquery twitter-bootstrap twitter-bootstrap-3

14 ответов

попробуй такое

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

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

если вы среда только для браузера используйте @SridharR'ы.

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

72

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

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

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

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

вы указали неправильный порядок для JAVASCRIPT и BOOTSTRAP

по соглашению 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

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

ниже код был предварительно заполнен _Layout.cshtml файл. (Не написано мной)

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

но, когда я проверил в папке скриптов, jquery-1.10.2.минута.js даже не был доступен. Следовательно, заменен код, как показано ниже, где jquery-1.9.1.минута.JS-это существующий файл:

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
1

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

изменение в конвейере.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') в приложение.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

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

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

0

вам нужно добавить jQuery js перед добавлением файла JS bootstrap, потому что 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-- > настройки-- > совместимость

enter image description here

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

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

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

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

сразу после загрузки staticfiles i.e {% load staticfiles %} в базу.HTML-код

0

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

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