1. まとめトップ

【jQuery】動かない!プラグインがうまくいかないときの解決方法

スクリプトといってもjQueryは書き方を一つ間違えると全く動かなかったり、思った通りに動作しないことがある。動かないのはどこか間違っているので、原因を見つけよう!

更新日: 2018年04月30日

0 お気に入り 1997 view
お気に入り追加

この記事は私がまとめました

ken.toshimaさん

チェックリスト

■jQuery本体(コアファイル)
・jQueryの本体が読み込まれているかどうか?
・jQueryのバージョンとブラウザのバージョンが合っているか?
・コンフリクトしていないか?
・セレクタが間違っていないか?
・セレクタが重複していないか?
・チェック環境が本番と同じか?
・本体が正しい位置で読み込まれているか?
・記述したスクリプトのタイミングが間違っている?
・タグの記述が間違っていないか?

■プラグイン
・プラグインが読み込まれているかどうか?
・読み込んでいるjQuery本体とプラグインのバージョンが一致しているか?
・プラグインとブラウザのバージョンが合っているか?
・セットのCSSや画像などが読み込まれているか?
・プラグインがコンフリクトしていないか?

jQueryの本体が読み込まれているかどうか?

・ファイルの場所が間違えている?
・ファイルの名称が間違えている?
・ドメインを間違えている?
・本体の中身がちゃんと入っているか?

jQueryのバージョンとブラウザのバージョンが合っているか?

対応しているバージョンがどのバージョンのものを使用していて、
どんなブラウザを使用していて、どんなバージョンなのか?その組み合わせで動作するのかどうか?

コンフリクトしていないか?

・他に読み込まれているjQuery本体がある?それによって衝突を起こして動かなくなっている?
・他のjQueryやJavaScriptの記述がある?それによって衝突を起こして動かなくなっている?

セレクタが間違っていないか?

・例えば#sampleのところが#sanpleになっているとか?
・例えばbodyとすべきところをdivとしていないか?

セレクタが重複していないか?

・例えば<div id="page">がページ内に2箇所以上ないか?

チェック環境が本番と同じか?

・サーバーサイド側のプログラムが動作しないと表示されない仕組みであれば、
それと同じ環境にしないと動かない。例:jQueryをPHPで読み込んでいるなど。

本体が正しい位置で読み込まれているか?

・記述したスクリプトの位置が本体よりも前に記述されていると動作しない。

記述したスクリプトのタイミングが間違っている?

function等以外、基本的にJavaScriptは1行ずつ処理されて、上から順番に動作する。
そのため、jQueryの文法で記述した対象のタグが無いタイミングで処理されてしまう。

HTMLが準備されてから動作するようにするためには、以下のような記述で囲う。
$(document).ready() { /* 処理 */ }
→ DOMが構築されたら実行

$(window).load() { /* 処理 */ }
→ ページが完全に読み込まれてから実行(画像等含む)

タグの記述が間違っていないか?

<div class="sample1"><p></div>aaaa</p>
例えば上記のようだと、HTMLの記述方法がおかしいのでうまく動作しない。

プラグインが読み込まれているかどうか?

・ファイルの場所が間違えている?
・ファイルの名称が間違えている?
・ドメインを間違えている?
・プラグインの中身がちゃんと入っているか?

読み込んでいるjQuery本体とプラグインのバージョンが一致しているか?

対応しているバージョンがどのバージョンのものを使用していて、
どんなブラウザを使用していて、どんなバージョンなのか?その組み合わせで動作するのかどうか?

セットのCSSや画像などが読み込まれているか?

CSSや画像が読み込まれていないと思ったような動作をしないことがある。

プラグインがコンフリクトしていないか?

他のjQuery本体、他のプラグイン、他のJavaScriptと衝突を起こしていて、うまく動作しない。
衝突している箇所が確認できたら、名称を変えたり、処理を変更する。

1