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