jquery - JQuery入力要素

Question

div内のすべての入力要素を取得してから、イベントハンドラーをアタッチする必要があります。これにより、値が変更されるたびに非表示フィールドが更新されます。div内の子要素には、すでにイベントハンドラーが含まれている可能性があります。その場合、アタッチはそれをチェーンする必要があります。

どんな助けでも大歓迎です。

Answer 1

$("#divID :input").change(function(){
    // write your code here
});

ここで、divID は div の一意の ID です。これにより、div 内のすべての入力、テキストエリア、選択、およびボタン要素が選択されます。

参照:入力セレクター

ボタン要素を避けたい場合は、次のように not 演算子を使用できます

$("#divI :input:not('button')").change(function(){

});

Answer 2

jQueryはチェーンを自動的に処理するため、以下が機能するはずです。

$("div input").change(function() { whatever(); });

Answer 3

さて、なぜ非表示フィールドを更新してデータを複製する必要があるのか​​興味があります。ただし、各要素を手動でアタッチする代わりにこれを行うと柔軟性が失われる可能性がありますが、これが「1つのサイズですべてのソリューションに適合する」と主張する場合です。

まず、HTML：

<form id="form">
   <input type="text" id="txtName" />
   <input type="hidden" id="hdnName" />

   <input type="text" id="txtEmail" />
   <input type="hidden" id="hdnEmail" />

   <select id="selGender">
      <option value="male">Male</option>
      <option value="female">Female</option>
   </select>
   <input type="hidden" id="hdnGender" />
</form>

さて、Javascript：

$(document).ready(function() {
   $("#form").find("input[type='text'], select").change(function() {
      $this = $(this);

      var id = $this.attr("id");
      id = id.split(3, id.length - 1);

      $("#hdn" + id).val($this.val())
   });
});

textこれが機能するためには、各フィールドがフィールドとしてあり、ここで使用した命名規則に従っていることも前提としています（ [txt|sel]FieldName、hdnFieldName）