【jQuery】$ is not a function エラー

さて、2つ目の記事です。

 

この間仕事で開発中にちょっとだけjQueryの書き方でハマったのでメモ程度に書いておきます。

 

タイトルの通り、ブラウザで読み込んだ時に

 $ is not a function

 がエラーで出てしまう時があります。

 

これは普通に、jsファイル内で以下のようなコードを書いていた時に、

$('hoge').click( function()) {

 $(this).addClass('selected');

});

問題なさそうに見えますがエラーしてしまいます。

 

大きいサービスとかだとよくあるのかな?と思いますが、

prototype.js等のライブラリと併用したいというときに、$の定義がコンフリクトしてしまうのだそうです。

そういう場合を回避するために、ファイルの最初の方にこういう記述が必要になります。

jQuery.noConflict(); 

【原因】

これがあると、jQueryの$関数が使用できなくなります。

従って、$ の代わりに jQuery を使用しなくてはなりません。

 

こんな感じ↓

jQuery('hoge').click( function()) {

 $(this).addClass('selected');

});

 ただし、これだと毎回書かなくてはいけないので面倒です。

なので、別の名前で定義しましょう。

 

そしたらこんな感じでかけます。

var $j = jQuery.noConflict(); //定義してあげる 

 

$j('hoge').click( function()) {

 $(this).addClass('selected');

});

 

【解決方法】

というわけで、このエラーでハマったら

jQuery.noConflict();ってどこかに書いてないか探しましょう。

 

【参考】

jQueryと他のライブラリのコンフリクトを避ける方法 | HALAWATA.NET

他にも即時関数を使うやり方があるそうなので、既存ソースいじる方は適宜従ってくださいね〜。それでは。