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