.change() – устанавливает обработчик изменения заданного элемента формы, либо, запускает это событие.

Метод имеет три варианта использования:

.change( handler )

• handler — функция, которая будет установлена в качестве обработчика.

.change( [eventData ], handler )

• eventData – объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате {fName1:value1, fName2:value2, ...};
• handler — функция, которая будет установлена в качестве обработчика.

.change()

Вызывает событие change, у выбранных элементов страницы.

В первых двух вариантах, этот метод является сокращенной версией .on( "change", handler ), а в третьем – .trigger( "change" ).

Событие change срабатывает при изменении полей формы. Оно отслеживает поля <input>, <textarea> и <select>. Для элементов <select>, radio и checkbox событие запускается сразу после изменения, в остальных случаях только после потери фокуса, т.е. в тот момент, как пользователь перейдёт на другой элемент.

Например, у нас есть следующий html:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

Обработчик события может быть установлен для текстового поля и списка выбора:

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

Теперь при выборе значения в списке отображается предупреждение, так же оно отобразится при изменении текста в текстовом поле, но после того как оно потеряет фокус. Если текстовое поле потеряет фокус без изменения его содержимого, то событие не запустится. Чтобы инициировать событие вручную, достаточно вызвать .change() без аргументов:

$( "#other" ).click(function() {
  $( ".target" ).change();
});

После выполнения этого кода мы увидим предупреждение дважды, потому что у нас на форме два элемента.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KRZwoN” default_tab=”js,result” user=”AmateR”]See the Pen <a href=’https://codepen.io/AmateR/pen/KRZwoN/’>KRZwoN</a> by Aleksei (<a href=’https://codepen.io/AmateR’>@AmateR</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]