jQuery is not defined – 呼んでいるのに見つからない場合にチェックする事

突然Webの動作がおかしくなる事ありますよね。 ”jQuery is not defined?”昨日まで問題なかったのに突然挙動が変になっている。調べてみました。まさかの落とし穴が?? jquery_kousiki

Initializing...
変更もしていないのになぜ? 私も先日やってしまいました。気づくまで2時間以上も費やしてしました。そこで少しでもお役に立てればという思いと備忘録もかねて残しておきます。

原因は必ずある

jQueryが見つからない場合には、ブラウザにはいろいろな表示をします。

  • jQuery is not defined
  • uncaught referenceerror $ is not defined

もし挙動がおかしくなった場合に、ブラウザにはChromeにもFirefoxにもデベロッパーツールがあります。F12を押して起動してください。きっと上記のようなエラー表示がされていると思います。この場合は、jQueryが見つからないといっていますので、まずは根元から原因追求します。 見つからない原因は必ずあります。順を追って調べましょう

chromeのデベロッパーツールを起動したところ

chromeのデベロッパーツールを起動したところ

もっとも多いのは記述ミス

この記事を読まれている方にはあまりないミスかもしれません。なんといっても変更していないはずですから… でも以外と多い事例かもしれません。 単純なスペルミスをしていませんか? やはり最後の所で確認しましょう。ブラウザからソース表示をしてよ~く観察してみてください。

ほんとうにない場合

たぶん、<script~始まるステートメントでjQueryを定義していると思いますが、jQueryもブラウザにしてみれば普通のJavaスクリプトですので、参照しているURLをそのままブラウザで表示することができますので、別のウィンドウやタブを開いてダイレクトにURLを打ち込んで表示されるかどうか確認してみてください。案外見つからないのかも

読み込む順番が違うのかも

案外気づきそうで気づかないのがこれ。本人はjQueryにばかり集中しているので、読み込み前に別のプログラムが参照しているのに気づかないことが考えられます。 JavaScriptは単純で前から順番にしか実行しません。いろいろなプログラミング言語をかじっていると、後方参照(使うのば前で、定義が後になる場合)に慣れてしまっているのかも知れません。Javaではこれはエラーです。

あるのに読み込み不可!

これもあるあるです! jQueryをgoogleapisサイトから自サイトにコピーしている場合.htaccess等で置いてあるフォルダーを読み込み禁止にしてあり、実際に読み込みが不可になっていないかも確認してみてください。

ほんとうに自分じゃなかった!

今日の本題はこれです。 私は結構おっちょこちょいなんで凡ミスも多いです。これらの事を上から順番に1つ1つ確認してこの問題で2時間以上も費やしてしまいました。最後にはサンプルまで作っても確認。でも原因は見つかりませんでした。やはりどうしても動かない。ほぼ諦めかけた時、気づきました。それは、製作のためにCloudFlareをパスさせているということ。CloudFlareはサイトの高速化のためのキャッシュサーバー。あなたも使っていませんか。CloudFlareはドメイン単位で稼動させますが、サブドメインをつくると一部だけCloudFlareから切り離すことができます。 CloudFlareを通すとRocket Loderという機能がつかえます。実際には以下に示したように<script~を書き換えます。

<script data-cfasync=”false” type=”text/rocketscript” data-rocketsrc=’http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’></script>

これらのCloudFlareの機能は別の機会にしますが、切り離したサブドメインでも同じ記述が見受けられました。もうお分かりかもしれませんが、切り離したつもりが完全に切り離されずにjQueryに影響していました。 これの対処方法は2つ

  1. CloudFlareのRocket Loaderの機能自体をオフにする。
  2. 切り離さずにCloudFlareを通す

2番は必要ないかもしれませんが、これには理由があります。1番目のRocket Loaderの機能のオフは、CloudFlareのPage rulesでRocket LoaderがdefaultまたはAutomaticとなっていると思いますがこれをOffにします。でも実際にはOffにならずにリロードするとdefaultに戻ってしまいました。しかたなく私は2番で今回の問題をパスすることにしました。とりあえずこれ以上は時間をかけたくなかったので。 結論:

jQueryが動作しないのはCloudFlareのせいかもしれない!!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク

最新の投稿

ウィジェット領域を新規に作成する
2019年02月22日 2019:02:22:17:51:46

2019年02月21日 2019:02:21:16:16:24
ブログの文書管理および効率のよい作成方法
2019年02月20日 2019:02:20:10:13:25
アマゾンタイムセール、ACコンセント付き20100mAH RavPowe
2019年02月17日 2019:02:17:16:17:44
windows updateできない場合は、これで解決しろ!
2019年02月17日 2019:02:17:13:47:07
ページ上部へ戻る