More than 3 years have passed since last update.

jQueryのプラグインを複数追加したら動かない

Posted at 2020-09-27

はじめに

自分の振り返りを兼ねて、ここに記していきたいと思います。
jQueryのプラグイン「drawer.js」を新たに実装したとき、ディベロッパーツールでエラーが起きていることを発見しました。
原因と解決方法を記していきたいと思います。

Uncaught TypeError: $(...).drawer is not a function at HTMLDocument. (index.html:747)
一体なんだ？と詳しくみてみると
エラー箇所はHTML内の下記に示されていました。
ただし、コード自体に誤りはなさそうでした。


<script>
$(document).ready(function() {
  $('.drawer').drawer();
});
</script>

上記の場合だけでは、反映することができず、ドロワーメニューは開くことができません。
いろいろ調べた結果、、、
今回の場合は、他のプラグインを入れていることで動かなくなっている
つまり、コンフリクト（プラグイン同士の競合） が原因でした。

先ほどのコードに下記のコードを追加しました。


<script>
jQuery.noConflict(); 
(function($) {

$(document).ready(function() {
  $('.drawer').drawer();
});
})(jQuery);
</script>

jQuery.noConflict();を追加することで解決することができました。