web-dev-qa-db-ja.com

ブートストラップがキャッチされていないエラーをスローします：ブートストラップのJavaScriptはjQueryを必要とします

私はBootstrapを使ってプログラムのインターフェースを作成しようとしています。私はjQuery 1.11.0を<head>タグに追加しました、そしてそれはそれであると思いました、しかし私がブラウザでウェブページを起動するとき、jQueryはエラーを報告します：

Uncaught Error: Bootstrap's JavaScript requires jQuery

私はjQuery 1.9.0を使用してみました、私はいくつかのCDNでホストされているコピーを試してみました、しかし私はそれを働かせることができません。誰が私が間違っていることを指摘できますか？

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
154
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>
334
Sridhar R

ブラウザのみの環境 にいる場合は、 SridharR のソリューションを使用してください。

Node/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に設定してください。そうすればこの回避策は必要ありません。

78
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>
12
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を使っているのであれば、app.jsにwindow.$ = window.jQuery = require('jquery')を追加する必要があります。

または以下のような親ファイルをロードした後に依存ファイルをロードすることもできます。

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ファイル で適用する必要がありました。

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
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によってサーバーに公開されましたが、Webサーバーには0 KBのファイルスタブしかありませんでした。コンテンツがないと、サーバーはファイルをブラウザに配信できませんでした。

ファイルを再発行し、サーバーが実際にファイル全体を受信したことを確認した後、私のWebページでエラーが発生しなくなりました。

0
Zarepheth

私はほとんどすべての上記の方法を試してみました。

最後にそれを含めることでそれを修正しました

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

静的ファイル、つまりbase.htmlに{% load staticfiles %}をロードした直後

0
kanika

これがIEイントラネットのみに発生する場合は、互換性設定を確認し、[イントラネットサイトを互換モードで表示する]のチェックを外します。

IE - >設定 - >互換性

enter image description here

0
Davut Gürbüz

BootStrapはjqueries関数を使用するため、ブートストラップjsファイルを追加する前にJQuery jsを追加する必要があります。そのため、最初に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
Jani Devang

この問題に苦しんだ後、私は3つのステップを踏みました：

  1. 1.9.0から3.0.0の間でjQueryのバージョンを使用する
  2. ブートストラップファイルを宣言する前にjQueryファイルを宣言します。
  3. これら2つのスクリプトファイルは、<body></body>ではなく<head></head>タグの末尾に宣言してください。これらは私のために働きましたが、あなたが使っているブラウザに基づいて異なる行動があるかもしれません。
0
Karisno1