jQueryはJavaScriptというプログラムを、より扱いやすくしたファイルのことをいいます。jQueryを使用することで、プログラム初心者でも比較的簡単にプログラムの記述ができます。
しかし、コードを記述してjQueryを動かそうとしても反応が無く、エラーが表示されてしまう時があります。
本記事では、ChromeとFirefoxなどのブラウザでjQueryが動かない時の原因と対処法について紹介します。
この記事の内容
- jQueryが動かない原因
- 対処1: jQuery本体を読み込んでいるか確認する
- 対処2: jQueryのパスを確認する
- 対処3: jQueryの読み込み順序を確認する
- 対処4: jQueryのバージョンを確認する
- 対処5: 簡単なjQueryのスクリプトを実行してみる
- 対処6: 複数のjQueryを読み込んでいないか確認する
- 対処7: headにjavascript宣言をする
- 対処8: DOCTYPEの宣言をする
- 対処9: ブラウザのJavaScriptのサポートを確認する
- 対処10: DOMが存在しているか調べる
- 対処11: プロトコルを指定する
- 対処12: エンコードを宣言する
- 対処13: httpsを指定する
- 対処14: コンフリクトを確認する
jQueryが動かない原因
ページ上でjQueryが動かない原因は様々ですが、主に次のような原因が考えられます。
- jQueryが正しく読み込めれいない
- jQueryのバージョンに問題がある
- 読み込みのプロトコルに問題がある
- HTMLの宣言やエンコードに問題がある
- コンフリクトが起きている
jQueryが動作しない原因は、サーバー上であってもローカル上であってもほとんど変わりません。
対処法を紹介していくので、順に該当する項目がないか確認して下さい。
対処1: jQuery本体を読み込んでいるか確認する
基本的な確認項目ですが、jQuery本体を読み込んでいるか確認して下さい。jQueryで動かしたいスクリプトやプラグインを読み込むだけでは動きません。
jQuery本体は、『jQuery公式ページ』から本体をダウンロードして直接ファイルを配置して読み込むか、CDNから読み込みます。
- 直接jQqueryファイルを配置する
<script src="https://domain.com/配置ディレクトリ/jquery.min.js"></script>
- GoogleCDNから読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/X.XX.X/jquery.min.js"></script>
対処2: jQueryのパスを確認する
jQueryの読み込みに指定しているパスに誤りがないか確認して下さい。
次の手順でページ上でjQueryが正しく読み込めているか確認できます。
- ブラウザで対象のページを開きます。
- ページのソースを表示します。
- 「jquery」でソース内を検索してjQueryを読み込んでいるコードを探します。
- コードのURLをクリックしてjQueryの内容が表示されるか確認します。
<script src="https://domain.com/js/jquery/X.XX.X/jquery.min.js"></script>
404 Not Foundなどが表示される場合は、ファイルが存在しておらず、jQueryのパスの指定に問題があることが考えられます。正しいjQueryのパスを指定して下さい。
対処3: jQueryの読み込み順序を確認する
jQueryライブラリよりも先に、スクリプトファイルやプラグインを読み込むと正しく動作しません。
必ず先にjQueryライブラリを読み込んで、その後にスクリプトファイルやプラグインを読み込むようにして下さい。
<script src="https://domain.com/js/jquery/X.XX.X/jquery.min.js"></script> ←一番上に記述する <script src="https://domain.com/js/jq-plugin1.js"></script> <script src="https://domain.com/js/jq-plugin2.js"></script> <script src="https://domain.com/js/jq-script.js"></script>
対処4: jQueryのバージョンを確認する
jQueryのプラグインを使用しようとしている場合、プラグインがjQueryのバージョンに対応していないケースが考えられます。
プラグインの配布ページでjQueryの対応しているバージョンを調べて、古いバージョンのjQueryを読み込むように変更して下さい。
古いバージョンのjQueryは、次のページからダウンロードできます。
古いバージョンでは使用できていたコードは、jQueryのバージョンが新しくなると動かなくなることもあります。jQueryをバージョンアップする際は、プラグインの対応状況を事前に確認しましょう。
対処5: 簡単なjQueryのスクリプトを実行してみる
jQueryが動いていないように見えても、実は正しく読み込めているケースがあります。
HTMLファイルのjQueryライブラリを読み込んでいるコードの下に、次のコードを直接記述してページの表示を確認してみて下さい。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background-color", "red");
});
</script>ページ上のdiv要素の背景が赤色に変わる場合は、jQueryが正しく読み込めています。この場合、スクリプトファイルやライブラリのコードに問題があります。
ページ上のdiv要素の背景色に変化がない場合は、次の対処を参考にして下さい。
対処6: 複数のjQueryを読み込んでいないか確認する
同一のページ内で違うバージョンのjQueryを複数読み込むと、jQueryの動作に問題が起きることがあります。
特に読み込みの記述場所が離れていると、複数読み込んでいることに気づきにくい場合があります。
ページ内で読み込ませるjQueryのバージョンは1つにして、異なるバージョンを複数記述しないようにして下さい。
対処7: headにjavascript宣言をする
FirefoxでjQueryが動かない原因の1つが「head部分の宣言抜け」です。headタグに以下のjavascript宣言が入っていないと、コードを記述してもjQueryは動作しません。
<meta http-equiv="Content-Script-Type" content="text/javascript">
Firefox上でjQueryを動作させたい場合は、忘れずに上記のコードをhead部分に宣言しておきましょう。
対処8: DOCTYPEの宣言をする
DOCTYPEの宣言をしていないと、IEなどの一部のブラウザでjQueryが動作しない場合があるようです。
DOCTYPEの宣言がコード上にあるか確認して下さい。ない場合は、HTMLコードの一番上に次のコードを追加してみて下さい。
<!DOCTYPE html>
対処9: ブラウザのJavaScriptのサポートを確認する
古いバージョンのブラウザでは、一部のJavaScriptをサポートしていない場合があります。最新のブラウザを使用しているか確認して下さい。
また、ブラウザのデフォルト設定ではJavaScriptの機能は有効になっていますが、無効に変更している場合があります。設定変更をした覚えがある場合はブラウザの設定を確認して下さい。
対処10: DOMが存在しているか調べる
jQueryのセレクタに指定したDOMがスクリプト実行時にそもそも存在しておらず、jQueryが動作していないように見える場合があります。
スクリプト内に次のコードを挿入して、処理時にDOMが存在しているかチェックしてみましょう。
if($('DOMのセレクタ').length){
alert('OK');
}DOMが存在している場合は、アラートが表示されます。
アラートが表示されない場合は、DOMのセレクタの記述が間違っているか、処理時にDOMが存在していないため、jQueryの処理が実行されていないことが考えられます。
まずは、DOMのセレクタの記述に間違いがないか確認して下さい。
間違いがなければ、次のいずれかの方法で、DOMの生成を待ってからjQueryを実行することで正常に動作する可能性があります。
方法1: $(document).readyを使う
DOMの構築を待ってからjQueryを実行するようにコードを変更してみましょう。DOMの構築を待つには、documentにreadyイベントを登録します。
$(document).ready(function() {
// jQueryのスクリプト
});方法2: $(window).onを使う
readyを使ってもうまく動作しない場合は、onloadを使うことで上手くいく動作する可能性があります。
$(window).onは、ページの読み込みが完全に完了するのを待ってから処理を行います。
$(window).on('load', function() {
// jQueryのスクリプト
});対処11: プロトコルを指定する
参照URLが正しいのにjQueryが読み込まれず動かない場合は、プロトコルが指定されているか確認しましょう。
ローカル環境の場合、プロトコルを未指定にするとローカルネットワーク向けの「file」が適用されます。そのため、プロトコルを省略した記述は、https(http)で提供されているファイルにアクセスできなくなります。
<script src="//domain.com/js/jquery/X.XX.X/jquery.min.js"></script>
ローカルでサーバー上のjQueryを読み込みたい場合は、次のようにhttpかhttpsを指定して下さい。
<script src="https://domain.com/js/jquery/X.XX.X/jquery.min.js"></script>
対処12: エンコードを宣言する
ローカル上のHTMLの場合、文字のエンコードを宣言していないとjQueryが正しく動作しないケースがあります。
head部分にエンコードの宣言がない場合は、次のようにUTF-8でエンコードを宣言してみて下さい。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
対処13: httpsを指定する
ページのURLがhttpsの場合、jQueryライブラリやスクリプトファイルの読み込みに「http」プロトコルを使っていると正常に動作しません。
<script src="https://domain.com/js/jquery/X.XX.X/jquery.min.js"></script> <script src="https://domain.com/js/jq_plugin1.js"></script> <script src="https://domain.com/js/jqscript.js"></script>
上記のように、「https」でjQueryライブラリやスクリプトファイルを読み込むよう変更して下さい。
対処14: コンフリクトを確認する
jQueryでは、グローバル関数として「$()」を使用します。
$('セレクタ').メソッド(引数);「$」の関数名を使用している別のライブラリ(prototype.jsなど)を同時に読みこむと、関数名が重複してしまいjQueryが正しく動作しません。
コンフリクトを避けたい場合は、jQuery.noConflictを記述します。jQuery.noConflictを記述した場合は、「$関数」ではなく直接「jQuery関数」でjQueryを呼び出します。
jQuery.noConflict();
jQuery('セレクタ').メソッド(引数);「$」を使って記述したい場合は、次の例のように関数の引数に「$」を使うことでスコープ内でのみ「$関数」を使えるようにできます。
jQuery.noConflict();
(function($) {
$(function() {
// jQueryのスクリプト
});
})(jQuery);上記以外の方法でも、jQuery.noConflictを使ってコンフリクトを防いでjQueryを使うことができます。その他の方法については、次のページも併せて参考にしてください。
WordPressの場合
WordPressのjQueryには、コンフリクトを回避するためにjQuery.noConflict()があらかじめ記述されています。
そのため、Wordpressでも同じように「$」を「jQuery」に置き換えて記述する必要があります。