javascriptでjqueryを使う際にエラーになります

前提・実現したいこと

jQueryを使いたい。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

jQueryのインストールの仕方や使いかたが間違っているのか、＄の前に$ is not defined のエラーが出ます。

エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script> function add_element() { $('#box').append('<p>p要素を追加しました</p>'); }

   // DOMの読み込みが全て完了したら
   $(document).ready(
       function() {
           $('#add').click(add_element);
       }
   );

</script> </head> <body> <button id="add">要素を追加</button> <div id="box"></div> </body> </html> ```ここに言語名を入力ソースコード ```

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/08/19 08:51 編集

（質問は編集できます）コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと質問テンプレート文と思われる文言が多く残っています。削るか、項目は埋めてください。

Lhankor_Mhy

2020/08/19 08:53

ご提示のコードを当方で試したところ、エラーが発生することはなく、問題が再現しませんでした。

m.ts10806

2020/08/19 08:54

ちなみに、現象は再現しません。

m.ts10806

2020/08/19 08:56

再現するブラウザ、アクセスURL　ご提示ください。

行動規範の内容に同意します

回答2件

script[src] のプロトコルの問題ではなさそうです。

http: http://code.jquery.com/jquery-1.11.0.min.js
https: https://code.jquery.com/jquery-1.11.0.min.js

jQueryのインストールの仕方や使いかたが間違っているのか、＄の前に$ is not defined のエラーが出ます。

CDN をサービスするサーバーが正しく応答しなかったのが原因と思います。
jQueryの読み込みに失敗するので、ライブラリが名前空間として扱う $ が未定義undefinedになり、$ is not defined のエラーが発生したのだと考えられます。

このような正しく応答されない事例は、アクセスが集中する時などに起こります。

サーバースペックが低く、CDNサービスもなかった時代は頻繁に発生していましたので、jQueryなどのライブラリは一旦ダウンロードし、自身のサーバー環境に配備しておくという方法を取っていました。

現在でも稀に発生する現象ですので、「時間を置いてページの再読込をする」のが正解と思います。

追記）

フォールバック処理（自身のサーバーにも置いておく）

javascript
1<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
2<script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"></script>');</script>

投稿2020/08/19 09:35

編集2020/08/19 09:53

AkitoshiManabe

総合スコア5434

ベストアンサー

の「https:」をなくすか、「http:」に変えてみてください。

投稿2020/08/19 08:54

編集2020/08/19 08:56

ex025

総合スコア179

WSaki

2020/08/19 09:02 編集

ありがとうございました：）

m.ts10806

2020/08/19 09:10

Chiba_mさんコピペで再現しない以上は、当回答においてどのような状況下で解決するのか記載された方が良いかと思います。 $ is not definedとは別のエラー（もしくはワーニング）がでるはずです。

ex025

2020/08/19 09:25 編集

$ is not definedとあるので、Jqueryが正しく読み込まれていないことが原因である可能性が高いです。httpsが使えない可能性を想定しました。 src属性に「https:」と明記することで必ずhttpsのプロトコルで通信するようになりまが、src属性にプロトコルを明記しない(//から始める)ことで自動的にプロトコルが選択されるため、解決する可能性が高いです。しかし、ローカルファイルをブラウザで開いた際は自動的にfile://でアクセスしようとするため、エラーが発生します。これを避けるためにhttpではじめる選択肢も提示しました。

行動規範の内容に同意します

あなたの回答