ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

jQueryが動作しなかった意外な理由

prototype.jsjQueryを共存させている古いページをメンテナンスしました。
コードをよく見ると、prototype.jsは読み込まれていても実際は利用されていない状態でした。
消してしまって大丈夫だと判断できたので、prototype.jsの読み込みを削除しました。
jQuery自体は、別ファイルにしてあるJavaScriptでしか利用していません。
別ファイルのJavaScriptではAjaxで値の取得をしていました。

メンテナンスの目的は、ラジオボタンである値を選択をされた場合、セレクトボックスを有効にするという機能の追加です。
jQueryで簡単にラジオボタンの選択を判定して、セレクトボックスを有効にすればいいと考え、別ファイルではなく、ページのソースコードに追加しました。

動作を確認すると思ったように動作しません。
なぜだと思ってブラウザのデバッガで動作を確認すると、jQueryが正常に動作していません。

$(document).ready(function() {

});

この最初の段階でエラーがになっています。

f:id:AJYA:20190329124917p:plain
unsplash-logoFabian Grohs

競合対策が影響していた

なぜ動かないのかと悩んでいろいろ試しても、現象は変わらず改善しません。
以前はどうして動いていたんだろうと考えて、Ajaxのための別ファイルを確認すると、

jQuery.noConflict();

が書かれていました。

原因は、この別ファイルが、ページに追加したjQueryのコードより前に読み込まれていたために、$が使えない状態になっていました。
semooh.jp

対処は、prototype.jsとの競合は起きないので、

jQuery.noConflict();

を削除して、別ファイルの競合を考慮した書き方を止めました。


予想外の理由で動作していませんでした。
競合対策がページのソースに書かれていたら、起きなかった事象だと思います。