jQueryが動かない時に確認する9項目

jQueryが動かない時に確認する9項目

1）スクリプトエラー

jQueryが動かないほとんどの原因は、記述ミスによるスクリプトエラーだと思います。
ブラウザ標準、またはプラグインで使えるコンソール機能を利用してエラー原因をチェックしましょう

○Chromeの場合
F12でデベロッパーツールを起動しConsolタブをクリック
または、「設定」>「ツール」>「デベロッパー ツール」
○IEの場合
F12で開発者ツールを起動しコンソールタブをクリック
○FireFoxの場合
プラグインでFireBugをインストール後・・・
F12でFireBugを起動しコンソールタブをクリック
または、「開発」
○Safariの場合
Ctrl＋Alt＋Cでエラーコンソールを起動
または、「開発」>「Webインスペクタを表示」
※上記はブラウザのバージョンやOSによって異なります。また、ブラウザ標準ツール以外にもFireBugのようにプラグインとして提供されている機能も複数あります。

2）処理のタイミングを確認

イベントで追加された要素やAjaxローディングを使って読み込んだDOM要素に対して処理を実行する場合、意図した通りに動かない場合があります。
例えば、次のような「ボタンをクリックしてdiv要素を追加する」という記述（scriptの2〜4行目）をした場合、最初からあるdiv要素に対しては、「div要素をクリックしたら背景色をredにする」と言った処理（scriptの5〜7行目）は有効ですが、ボタンクリックで追加された要素に対しては反映しません。

html

<input type="button" id="btn" value="div要素の追加" />
<div>テスト</div>
<div>テスト</div>

javascript

$(function() {
	$("#btn").click(function() {
		$(this).after('<div>テスト</div>');
	});
	$("div").click(function() {
		$(this).css('background', 'red');
	});
});

後から追加された要素に対してもイベントを設定する場合にはon()を使うのが有効です。※jQueryのバージョンが1.6以下の場合はlive()等を使ってください。

$(function() {
	$("#btn").click(function() {
		$(this).after('<div>テスト</div>');
	});
	$(document).on('click', 'div', function() {
		$(this).css('background', 'red');
	});
});

3）jQueryのバージョンチェック

昔書いたスクリプトがjQueryのバージョンを上げると動かないことがあります。
特にプラグインを併用している場合注意が必要です。
プラグイン配布元のサイトで動作条件を確認しましょう。

4）ブラウザのバージョンチェック

jQueryはクロスブラウザやモダンブラウザに対応されているのが魅力の1つですが、今後はIE 6/7/8のサポート打ち切り等も予定されているようです。
2013年予定のjQuery 2.0、IE8以下はサポート廃止の方針

5）コンフリクト

prototype等の他のライブラリと併用する場合、「$」が競合してしまいエラーになることがあります。
その際は、以下のように追加すつことで解消できます。

jQuery.noConflict();
var j$ = jQuery;

個人的には利用するライブラリは一つだけに絞ることをお勧めします。

6）プラグイン利用時に動かない

プラグインを利用している場合は、読み込みに不足しているプラグインがないかの確認をしてください。
jQueryやプラグイン以外にも、jQuery UIを使うといった場合も多々あります。

7）セレクタの重複チェック

セレクタが重複している為に予想と違う挙動をする場合があります。
特にid等はcssのルールに乗っ取りユニークな名前を付けるように心がけましょう。

8）DOCTYPE宣言

これはハマったらなかなか原因に気づかないと思いますが、普段あまり意識していないDOCTYPE宣言が重要だったりします。CSSでもDOCTYPE宣言によってうまくいかないことがあるかと思います。
以下参考サイト
DOCTYPEがjQueryではめっさ重要
DOCTYPE宣言ではまって泣いた＞＜

9）ローカルでの検証

ローカルで検証する場合はサーバーでの実行と比べて挙動に違いがおきる場合があります。
以前の記事に書いたのですがChromeでローカル検証を行った際、load関数が動かないということがありました。
→Google Chromeの起動オプション
検証はできるだけサーバー環境で行いましょう。