jQueryで「… is not a function TypeError:」のエラーが出る場合のjQuery.noConflictでの対処
jQueryを利用しているサイトを開発していて良く出くわすのが、「…is not a function…」というエラー。
たいていの場合は「jQueryの初期化がうまくいっていない場合」に出力されます。
初期化がうまくいっていないので、関数(function)として認識できないエラーですね。
こんな場合、
・きちんとjQueryのjsファイルを読み込めているかを確認する。
・jQueryを使うプラグインやライブラリのjsファイルを読み込めているか確認する。
などの対処を行なうと解決することが多いです。
が、、、
それでも解決しない場合、どうしたらいいでしょうか。
疑わしいのは、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; }); });
ajaxを勉強中です。ずうっとエラーが解決できずサイトを調べまくりこちらのサイトにたどり着きました。おかげで解決できましたありがとうございます。
このエラー原因は、なかなかわからないですよね。。
私も最初に出会ったときは、すごく悩みました。
お役に立ててよかったです。