jQueryが動かない!「コンフリクト(競合)」を回避する簡単な方法【初心者向け】

jQueryのプラグインをいくつも入れていると、たまにコードは間違っていなのに動かないという事があります。
それはjQuery同士がコンフリクト(競合)してしまっているためです。
コンフリクト(競合)とは
バージョンの違うプラグインや同じ関数を使っているものが動かなくなってしまう現象です。
色々方法はありますが、今回は手っ取り早くかつ一番効果のある回避方法の紹介です。
即時関数を使う
即時関数とかの意味は置いといて、
以下のように
jQuery.noConflict(); (function($) {
と
})(jQuery)
で、動かなくなったjQueryプラグインのコードを囲むだけです。
jQuery.noConflict();
(function($) {
//動かしたい jQueryプラグイン
})(jQuery)
ほとんどの場合がこの方法で動くようになります。
もし、これで動かない場合は次の方法もあります。
$(ドルマーク)を別の文字(jQuery)に置き換える
下記のように $(function()
の部分の$(ドルマーク)を「jQuery」に置き換えて jQuery(function()
にします。
jQuery.noConflict();
$(function() {
//jquery処理
});
jQuery.noConflict();
jQuery(function() {
//jquery処理
});
以上の2つで大体動くようになります。