jQueryのバージョンによって動作がしない

前提・現状

■前提
現在現場にてWebアプリを作成しています。
HTML系経験の１~２か月しかなく、全くの初心者です。

■現状
WebアプリのページをJSPにて作成しています。
iteratorを利用した一覧表が三つ存在します。
その三つの表にはそれぞれラジオボタンが存在します。

〇ラジオボンタンの選択※（Bアラートの場合も）逆も同じ
・ラジオボタンはA表B表C表に関わらずラジオボタンの選択は一つのみ。
・A表のラジオボタンを選択した場合には、C表で選択していたラジオボタンがクリアされるような処理。

〇TAB切替時の処理として※（Bアラートの場合も）逆も同じ
・Aアラートを選択した状態で「Bアラート一覧TAB」に切り替えた時にはAアラートのラジオボタンをクリア。
・Cアラートを選択した状態で「Bアラート一覧TAB」に切り替えた時にはクリア処理なし。
（CアラートはTAB切り替えの対象外の為）

発生している問題、ソースコード

以下作成したソースコードではjQueryバージョン関係なく動作します。
https://jsfiddle.net/SiRO4t6a/do2wb9qu/
しかし、上記ソースコードからB表を削った状態（アラート件数が0件の場合の表示）でテストを実施した結果、
jQueryの[//ラジオボタン再設定処理]が反応しませんでした。
([//ラジオボタン再設定処理]：ラジオボタンの選択を一つのみにさせる処理)

しかし、jQueryのバージョンを3.1.1以上にしたところ正常に動作しました。
https://jsfiddle.net/SiRO4t6a/493k5k09/10/

質問内容

たまたまバージョンを変えて実行してみて出来ましたが、
最初のソースでは問題なく動いている為、単純なバージョンが悪いわけでは無いように思われますがどうでしょうか？
また、バージョンが問題だった場合、どのバージョンでも動作するようにする為にはどうしたらよいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

切り分け

たまたまバージョンを変えて実行してみて出来ましたが、
最初のソースでは問題なく動いている為、単純なバージョンが悪いわけでは無いように思われますがどうでしょうか？

jquery.jsだけを入れ替えて事象が再現されるのなら、それが原因です。
他にも違うところがあるなら、ソースの異なる部分を少しずつ同じにして検証する必要があります。

既に後の祭りですが、通常は新しい機能を加えるときに一度に複数の場所を変えません。
複数個所を変更すれば、不具合発生時の原因特定に時間がかかるからです。

コンソール

コンソールでエラー出力状況を確認して下さい。

JavaScript
1TAB_2.style.display ='none';  // ReferenceError: TAB_2 is not defined

TAB_2 の定義はHTMLに依存しています。
HTML上にhttps://jsfiddle.net/SiRO4t6a/do2wb9qu/では存在していた <div id ="TAB_2"> が消失している為、ReferenceErrorになっています。

※id属性を持つ要素のグローバル変数化はレガシーブラウザが持っていた機能でいろいろと好ましくないので、getElementById や jQuery() に置き換えた方がベターだとは思います。

Re: Amaki_Siro さん

投稿2018/05/06 00:42

編集2018/05/06 00:44

think49

総合スコア18162

退会済みユーザー

2018/05/06 18:05

(think49)さん切り分けについて、承知しました;;会社で利用しているバージョンが3.1.1以上であることを願いたいと思います;;ご教授ご指摘して頂きありがとうございます。コンソールについて、jsfiddleにもコンソール確認できるところがあるんですね;;見方を確認しておきます。例えonclick要素に含めていなくてもerrorになってしまうのですね;; そうだったんですね;;色々勉強になります。アドバイス等もご助言をくださり、ありがとうございました。

行動規範の内容に同意します