業務改善 web開発 programming 旅行系記事多め。

jQueryライブラリ同士のコンフリクトを避ける方法

jQueryJavaScript

 

ぱらげです。

Laravelで作成したシステムサイトにページの閲覧履歴を表示したくて「jquery.cookie.js」をダウンロードしてみました。

こちらの参考ページ(http://cly7796.net/wp/javascript/plugin-jquery-cookie/)をみながらjsコードを読み込み、public/jsフォルダの中にファイルを設置。
コードも合っている?はずなのに下のようなエラー発生。

『 Uncaught TypeError: $.cookie is not a function

at HTMLDocument.<anonymous> (historypage.js:10)
at j (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.J (jquery.min.js:2) 』

原因は先に読み込まれていた「app.js」と今回の「jquery.cookie.js」がコンフリクト(衝突、競合)してしまっていたからでした。

ということで、「jquery.cookie.js」側のファイルを以下のように記述し直しました。

 

jQuery.noConflict();

(function($) {

 

//この中にコードを書く

 

})(jQuery);

 

「//この中にコードを書く」という部分に、実行したいスクリプトを書いていき、それを「(function($) { })(jQuery);」で囲ってあげます。
上部に「jQuery.noConflict();」も記述します。

 

エラー解決!

 

 

参考ページ
https://www.halawata.net/2011/10/jquery-noconflict/

 

 

コメント

タイトルとURLをコピーしました