Элементы ввода JQuery

Question

Мне нужно получить все входные элементы внутри div, а затем присоединить обработчики событий, чтобы при каждом изменении значений оно обновляло скрытое поле. Дочерние элементы внутри div могут уже содержать обработчики событий, если это так, то присоединение должно связать их.

Любая помощь очень ценится.

Answer 1

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

где divID - уникальный идентификатор div. Это выбирает все элементы input, textarea, select и button внутри div.

См. : селектор входа

Если вы хотите избежать элемента кнопки, вы можете использовать оператор not, например

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

});

Answer 2

Что ж, мне любопытно, почему вам нужно обновить скрытое поле и дублировать данные. Но если вы настаиваете, вот «одно решение подходит всем», хотя вы можете потерять некоторую гибкость, делая это вместо того, чтобы вручную прикреплять каждый элемент.

Сначала 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)

Answer 3

jQuery автоматически обрабатывает цепочки, поэтому должно работать следующее:

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