jQueryを利用しているサイトを開発していて良く出くわすのが、「…is not a function…」というエラー。
たいていの場合は「jQueryの初期化がうまくいっていない場合」に出力されます。
初期化がうまくいっていないので、関数(function)として認識できないエラーですね。
こんな場合、
- きちんとjQueryのjsファイルを読み込めているかを確認する。
- jQueryを使うプラグインやライブラリのjsファイルを読み込めているか確認する。
などの対処を行なうと解決することが多いです。
が、、、
それでも解決しない場合、どうしたらいいでしょうか。
jQueryが競合していないかを確認
疑わしいのは、ajaxで別なHTMLソースを読み込んでいたり、たくさんのjsファイルを読み込んでいる場合、「jQueryが繰り返して呼ばれていることで、競合していないか」ということです。
一度jQueryのjsファイルを読み込んだ後、ajaxで読み込むHTMLソース側にもjQueryのjsファイルを読み込む記述があったりすると、「…is not a function…」というエラーが表示されることがあります。
そのような場合は、ajax側でjQueryのjsファイルを読み込まないようにすることでエラー回避できる場合があります。
また、呼び出しているhtmlが別なサイトで、自分では変更できない場合、以下のように、jQueryを別変数に定義することも可能です。
この場合、jsファイルは普通に複数呼んでもOKで、その後、jQueryやそのプラグインを使うときに、以下のように別な変数を定義します。その後は、通常「$」と各部分を、定義した変数(下記で言うと「jqOther」を使って記述します。)
結構便利なTipsです。
//jQueryを別な変数「jqOther」で定義する。
var jqOther = jQuery.noConflict(true);
//以降は、$を「jqOther」に変換して使用。
jqDj(function(){
if(jqOther('.image').length){
jqOther('.image').slick({
arrows: false,
});
}
jqOther('.modal-close').on('click',function(){
$('.modal').magnificPopup('close');
return false;
});
});