jQueryプラグインをいくつか同時に使っていると、稀に正しいコードを記述しているはずなのに動かないという事態に陥ります。
これはjQuery同士がコンフリクト(衝突)しているのが原因です。
- コンフリクト(競合)とは
- バージョンの違うプラグインや同じ関数を使っているものが動かなくなってしまう現象。
コンフリクトが発生している場合、例えばGoogleChromeのデベロッパーツールで確認すると、以下のようなエラーが出力されます。
Uncaught TypeError: $ is not a function at (index):100
コンフリクトを回避する方法
コンフリクトを起こしているコードを次のように書き直します。
jQuery(function ($) { // 実行したいjQueryの処理 });
または即時関数を使って次のように記述します。
jQuery.noConflict(); (function($) { // 実行したいjQueryの処理 })(jQuery);
ほとんどの場合はこの方法で解決できるはずです。
セレクタの重複を確認
上記の方法で解決しない場合、もしかするとjQueryセレクタが重複している可能性もあります。
セレクタを指定するときにIDやカスタムデータ属性を使うなどの工夫で回避できるはずです。
ぜひお試しください。