インソースマーケティングデザイン
2014.11.18 コーディング
prototype.jsとjQueryの競合を避ける!
こんにちは。新人デザイナーの虎澤です。
デザイナー…なのですが、今回はデザインとは関係無いお話をひとつさせていただきたいと思います。
☆prototype.jsとjQueryの競合を回避する方法
先日、業務の中でprototype.jsとjQueryの両方を取り入れなければならないケースに遭いました。
そこではまってしまったのがこのふたつの競合です。
どうやら、このふたつを使いつつ「$」を書くとエラーがでてスクリプトが動作しなくなってしまうようです。
なぜエラーになるかというと…。
prototype.jsでは、$は「document.getElementById」として扱われ、jQueryでは、$はjQueryオブジェクトを指します。
それぞれで$の役割が全く異なり、取得できる要素が違ってくるためなのだそうです。
さて、原因がわかったところで、どうすればこのふたつの競合を回避できるのか?
方法は二通り。
●prototype.js をjQueryよりも先にロードするように記述し、「$」と記述するところを「jQuery」にする
●jQuery.noConflict()を使う
具体的な書き方は、こちらのサイトなどで詳しく解説されています。
これでまたひとつ勉強になりました。
まだまだ勉強しなくてはならないことだらけですね!
日々精進してまいります。
以上、虎澤でした!