jQueryが動作しなかった意外な理由
prototype.jsとjQueryを共存させている古いページをメンテナンスしました。
コードをよく見ると、prototype.jsは読み込まれていても実際は利用されていない状態でした。
消してしまって大丈夫だと判断できたので、prototype.jsの読み込みを削除しました。
jQuery自体は、別ファイルにしてあるJavaScriptでしか利用していません。
別ファイルのJavaScriptではAjaxで値の取得をしていました。
メンテナンスの目的は、ラジオボタンである値を選択をされた場合、セレクトボックスを有効にするという機能の追加です。
jQueryで簡単にラジオボタンの選択を判定して、セレクトボックスを有効にすればいいと考え、別ファイルではなく、ページのソースコードに追加しました。
動作を確認すると思ったように動作しません。
なぜだと思ってブラウザのデバッガで動作を確認すると、jQueryが正常に動作していません。
$(document).ready(function() { });
この最初の段階でエラーがになっています。
競合対策が影響していた
なぜ動かないのかと悩んでいろいろ試しても、現象は変わらず改善しません。
以前はどうして動いていたんだろうと考えて、Ajaxのための別ファイルを確認すると、
jQuery.noConflict();
が書かれていました。
原因は、この別ファイルが、ページに追加したjQueryのコードより前に読み込まれていたために、$が使えない状態になっていました。
semooh.jp
対処は、prototype.jsとの競合は起きないので、
jQuery.noConflict();
を削除して、別ファイルの競合を考慮した書き方を止めました。
予想外の理由で動作していませんでした。
競合対策がページのソースに書かれていたら、起きなかった事象だと思います。