web-dev-qa-db-ja.com

jQueryは定義されていませんTwitter bootstrap

JQueryが定義されていないというエラーが表示されます。 Twitter bootstrapおよびjQuery-UIを使用したい。私の<head>必要なCSSとJSを追加しました。 jQuery-UIページでは1.9.1 jQueryを使用しており、最新バージョンは1.10.2であることに気付きました。だから、何らかの衝突が起こっていると思います。 Twitter bootstrapはjQueryを必要とするため、エラーが発生している可能性があります。

頭：

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

エラー：

Uncaught ReferenceError: jQuery is not defined          bootstrap.min.js:6
(anonymous function)                                    bootstrap.min.js:6

enter image description here

javascriptjqueryhtmlcsstwitter-bootstrap
16
Liondancer

JQueryを他のすべての前にロードしてください！

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
47
tymeJV

これには、2つの理由が考えられます。

  1. JQueryを2回ロードしています。それらの1つ（できれば古いバージョン）を削除してください。
  2. JQueryをロードする前にbootstrap.min.jsをロードしています（ドキュメントを参照してください here ）。

あなたがする必要があるのは：

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" />
5
Rodrigo
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

ブートストラップの上にjquery jsファイルを追加します

4
Krishna

私はこれをテストしましたが、この順序が最もうまくいくようです。

  1. CSSを読み込む
  2. JQueryをロードする
  3. ロードブートストラップ
  4. JQuery UIを読み込む
4
Dev Enthusiast