Содержание:
.on( "change" [, eventData ], handler )Возвращает: jQuery
Описание: Привязка обработчика событий к событию "change".
-
версия добавлена: 1.7.on( "change" [, eventData ], handler )
На этой странице описывается событие change. Для устаревшего метода .change(), см. .change().
Событие change отправляется элементу, когда изменяется его значение. Это событие ограничено элементами <input>, полями <textarea> и элементами <select>. Для списков выбора, флажков и переключателей событие срабатывает немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не потеряет фокус.
Например, рассмотрим следующий 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" ).on( "change", function() {
alert( "Handler for `change` called." );
} ); Теперь, когда выбран второй вариант из выпадающего списка, отображается предупреждение. Оно также отображается, если вы измените текст в поле, а затем щелкните за его пределами. Однако, если поле потеряет фокус без изменения содержимого, событие не будет вызвано. Чтобы вызвать событие вручную, используйте .trigger( "change" ):
$( "#other" ).on( "click", function() {
$( ".target" ).trigger( "change" );
} ); После выполнения этого кода щелчки по Trigger the handler также будут отображать сообщение. Сообщение будет отображаться дважды, поскольку обработчик был привязан к событию change для обоих элементов формы.
Начиная с jQuery 1.4, событие change всплывает в Internet Explorer, что соответствует поведению события в других современных браузерах.
Примечание: Изменение значения элемента ввода с помощью JavaScript, например, с помощью .val(), не вызовет событие.
Примеры:
Прикрепляет событие изменения к элементу select, которое получает текст для каждого выбранного варианта и записывает их в div. Затем оно вызывает событие для начальной отрисовки текста.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$( "select" )
.on( "change", function() {
var str = "";
$( "select option:selected" ).each( function() {
str += $( this ).text() + " ";
} );
$( "div" ).text( str );
} )
.trigger( "change" );
</script>
</body>
</html> Демо:
Чтобы добавить тест на валидность ко всем элементам текстового ввода:
$( "input[type='text']" ).on( "change", function() {
// Check input( $( this ).val() ) for validity here
} ); .trigger( "change" )Возвращает: jQuery
Описание: Вызов события "change" для элемента.
-
версия добавлена: 1.0.trigger( "change" )
- "change"Тип: stringСтрока
"change".
-
См. описание для .on( "change", ... ).
