晒すシリーズ。jQueryが動かない！事件

KRUZは一応WEBディレクターとかやっています。だいたい10年くらいはこれでメシ喰ってます。
しかしKRUZの脳内メモリーは256MBくらいしかないので、忘れます。あっさりと。
カッコつけてもしょうがないので、今後のため失敗経験を晒してみようと思います。初心者さんの参考になったらいいなぁ・・と。

事の始まりは、僕が管理しているサイトにjQueryライブラリを導入したとき、それまで動いていたログイン画面のlightbox処理が動かなくなった事件。jQueryを導入してlightboxが動かなくなったので、原因は新規で入れたjQueryライブラリは間違いない。
ここで、冷静に考えればわかる事なんだけど（経験者はもうわかったよね？）、軽くパニック。
とりあえず、jQueryライブラリを解体したり配置のパスを変えたり（ちょっとサイト構造が面倒なのよ）してもダメじゃん！。

んで、jQueryを一通り解読（ここまで約１時間）して、ふとログイン画面のlightboxの処理を確認してみようかとjsフォルダを見ると…。

ん？prototype？… ！！。ここでようやく気づく。jQueryとprototypeが衝突しているのね。prototypeを入れたのがほぼ１年前だったので忘れていました。もうね、すっかり忘れていましたよ、jQueryとprototypeは衝突する可能性大。んで、処理をしてあっさり解決。
だいたい１時間半くらい格闘してました。こんなんでもWEBディレクターにはなれるんですね。

問題：なぜjqueryとprototypeは衝突するのか？

解説：簡単に説明すると、[$]関数の扱いにあります。prototypeでは”document.getElementById”に代わるモノで、超使う。
jQueryでは、大本のオブジェクトで使っている。つまり、双方別々の用途（この表現あってる？）で定義しているから、衝突というのはこの[$]関数が衝突している感じです。

回避方法：んで、どうしたらいいのでしょうか？

[$]関数を再定義したらいいんです。とは言えコアファイルから再定義するのは面倒なので、jQueryの”noConflict”というものを使います。
どんなものか？はあまり考えなくていいです。とりあえず書きコードを書くだけです。
ここで注意ですが、書く順番があります。
prototypeが先。jQueryが後です。さっきの “noConflict”はjqueryの[$]関数を書き換えるのよ。

なので、このように記述します。

 <script src="prototype.js"></script>
 <script src="jquery.js"></script>
 <script>
     // jQueryの $ 参照を無効にします。
     jQuery.noConflict();
     // jQuery を $j に割り当てます。
     var $j = jQuery;
     // jQuery を使用する場合は、上で割り当てた $j を使用できます。
</script>

みんなはこんなミスをしない様にしっかり覚えておくんだぞww。以上、晒すシリーズでした。まだまだあるよwwww

Share/Bookmark

2 Responses so far.

1. kz より:

   2010年4月12日 8:19 PM

   同じ目に遭ったことが！そのときからprotoなんとかは絶対使ってやらないと心に誓った15の夜でした。

   返信
   • KRUZ より:

     2010年4月13日 7:59 PM

     この時ばかりはprototype大っきらいになりました。それにしても、wperはjQuery派が多いと思うのは、僕だけ？

     返信