jQuery.noConflict()を指定していると「$ is not a function」とエラーが出る

既存サイトにjQueryで処理を追加しているときに、「$ is not a function」とエラーが出て少し調べたのでメモ。

jQuery.noConflict()

prototype.jsなどの$関数を使う他のライブラリと一緒に使用する場合、jQuery.noConflict()メソッドを実行して、$を使って記述する部分をjQueryに置き換えることで、他のライブラリとの競合を避けることができます。

今回の場合、処理を追加している部分より前でjQuery.noConflict()が実行されていたため、「$ is not a function」とエラーが出ていました。

JavaScript

jQuery.noConflict();

$(function() {
	$('body').css('background', '#999');
});

jQuery.noConflict()でエラーが出る場合のデモページ

$をjQueryに変更することでエラーが出ないようにできます。

JavaScript

jQuery.noConflict();

jQuery(function() {
	jQuery('body').css('background', '#999');
});

$をjQueryに変更した場合のデモページ1

または、jQuery(function($){ ～ });のような形にすると、その中で$を使用する事ができます。

JavaScript

jQuery.noConflict();

jQuery(function($) {
	$('body').css('background', '#999');
});

$をjQueryに変更した場合のデモページ2

【参考サイト】

• jQuery.noConflict() – jQuery 日本語リファレンス
• TECH Matari » Archive » jQueryのプラグインで超ハマる($ is not a function)
• jQueryと他のライブラリを同時に使用する方法 – jQuery – StackTrace