jquery отслеживать изменения элемента

Рассмотрим следующую задачу: при клике на кнопку текст из .block_1 должен попадать в .block_2, а при изменении .block_2 в .block_3 должна появляться информация вида: было -> стало.

Пусть HTML данной задачи выглядит следующим образом:

Содержание

  1. Решение
  2. Материал из JQuery
  3. version added: 1.0 .change( handler(eventObject) )
  4. version added: 1.4.3 .change( [eventData ], handler(eventObject) )
  5. version added: 1.0 .change()

Решение

Для того, что бы записать в .block_2 текст из .block_1 надо отследить событие click, но с .block_3 так не получится, ведь задача состоит в том, чтобы изменять содержимое .block_3 при изменении содержимого .block_2. В данном случае мы не можем отслеживать событие change, так как сам элемент не меняется, меняется его содержимое, поэтому необходимо использовать DOMSubtreeModified:

Материал из JQuery

Устанавливает функцию handler в качестве обработчика события change, на выбранные элементы.
Метод является аналогом bind(«change», handler(eventObject)).

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind(«change», eventData, handler(eventObject)).

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: .

Вызывает событие change, у выбранных элементов страницы. Метод является аналогом trigger(«change»).

Убрать установленный обработчик можно с помощью метода unbind().

Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования change(), можно найти в описании этих методов.

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

Вызывается или отслеживается JavaScript событие «change» (событие изменения формы).

version added: 1.0 .change( handler(eventObject) )

handler(eventObject)

Тип: Function()

version added: 1.4.3 .change( [eventData ], handler(eventObject) )

eventData

Тип: Object

Объект с данными, которые будут переданы в обработчик.

handler(eventObject)

Тип: Function()

version added: 1.0 .change()

Данный метод — это сокращение от .on( «change», handler ), и.trigger( «change» ).

Событие change выстреливает при изменение полей формы. Оно отслеживает поля ,

Источник: computermaker.info

Техника и Гаджеты
Добавить комментарий