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;
	});


});