JQueryでinputのvalue値を複数回取得すると最初に入力した値しか取得できない

Question

下記状態の画面にて、登録画面でinputに入力した値を取得した後に編集画面でinpuuに入力した別の値を取得すると登録画面に入力した値が取得されます。

・TOP.htmlというページに登録と編集画面がモーダルで表示される。
・登録と編集にあるinputは同じclassがついている。
・JSファイルはTOP.html、登録、編集それぞれに存在し、TOP.htmlにリンクを貼っている。
・登録、編集画面ではそれぞれinputに入力した値を取得する。

例：
登録画面

<input class="test">

inputに「りんご」を入力

$('input.test').val();

結果→りんご

編集画面

<input class="test">

inputに「みかん」を入力

$('input.test').val();

結果→りんご

valueの取得をDevToolsのコンソールで行っても同じ結果になるため、キャッシュが残っている様な状態なのかと思ったのですが、調べてもJQueryでvalue値を取得する際キャッシュをクリアする方法が分かりませんでした。
どなたか教えていただけると有り難いです。
宜しくお願いいたします。

Comments

[FKM]

データを打ち替えたときに何か発火させているイベントはないでしょうか？

Answer 1

・TOP.htmlというページに登録と編集画面がモーダルで表紙される。
・登録と編集にあるinputは同じclassがついている。

では後者の $('input.test').val(); も登録画面の要素にアクセスしているのでしょう。$('.登録画面のトップの要素のクラス input.test').val() などとして目的の要素を正しく選択しましょう。

または、クラス名を別のものにしましょう。

Comments

[退会済みユーザー]

編集画面のinputに別のクラス名を追加したら正しい値が取得できました！
ありがとうございます！

Answer 2

input.testに該当するものは、本当に1つしかないのでしょうか？

複数ある場合、.val()は文書内で先頭にあるものの値を返します。なので、「みかん」を入力した<input>より手前に別の<input class="test">（typeはhiddenでも何でも関係ない）があれば、そちらの値が取得されます。