- 締切済み
複数jQueryの配置で干渉 設置位置
Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 １サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 ２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 （HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？
- okok-my
- お礼率92% (12/13)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- 4017B
- ベストアンサー率73% (1336/1814)
試しに以下の様に書き換えて試してみてください。 <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> .... <script src="js/layout.min.js"></script> <script src="js/abcd.js"></script> </body> </html> 恐らく二重に jquery.min.js を読み込んでいるせいで互いに競合し合って不具合が発生してるものと思われます。"jquery.min.js(jquery.js)" は一番最初に1回読み込ませたら問題無く動作します。通常は ajax.googleapis.com を利用して最新版か、使いたいjQueryプラグインが対応しているバージョンのモノを一番最初に1回だけ読み込ませます。 "vendor/jquery.min.js" は恐らくバージョンが古いモノと推測されますので、Try＆Errorで ajax.googleapis.com からCDNとして配信されているjQueryライブラリのバージョンを試して、"layout.min.js" と "abcd.js" の両方が過不足無く正常動作する最も数字の大きい新しめのバージョンを最初に1回だけ読み込ませる様にすれば大丈夫だと思います。
お礼
色々配置してみまして動きませんでしたが、 前回に干渉で対処していた abcd.js内の jQuery.noConflict(); (function($) { を削除したら動きました・・・ 何故動いたのかは理解していません。 ありがとうございました。