Рубрики
FrontEnd

Отследить событие – изменение содержимого jQuery

Поделитесь материалом

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

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

<div class="block_1">Текст</div>
<div class="block_2"></div>
<div class="block_3"></div>
<button>OK</button>

Решение

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

var i = 0; // переменная - счетчик, для наглядности
var stalo =  (".block_1").text() + ' ( ' + i + ' )'; // записываем в переменную содержимое блока 1 + счетчик
var bilo = ''; // так как изначально блок 2 ничего не содержит, переменная пустая
('button').click(function(){ // отслеживаем клик по кнопке
	 (".block_2").text( stalo ); //вставляем в блок содержимое из переменной
	i++; // увеличиваем счетчик на 1
	stalo =  (".block_1").text() + ' ( ' + i + ' )'; // изменяем значение переменной 
	bilo = (".block_2").text(); // записываем в переменную содержимое блока 2
});
(".block_2").bind( 'DOMSubtreeModified',function(){ // отслеживаем изменение содержимого блока 2
	(".block_3").text( bilo + ' -> ' + stalo ); // вставляем в блок значения переменных
});

Автор: Alex Isaenko

Блоггер, разработчик, бизнесмен, коуч.

Добавить комментарий