Обнаружение изменений содержимого элемента с помощью jQuery

change() функция работает и обнаруживает изменения в элементах формы, но есть ли способ определить, когда содержимое элемента DOM было изменено?

Это не работает, если только #contentэто не элемент формы

$("#content").change( function(){
    // do something
});

Я хочу, чтобы это срабатывало при выполнении чего-то вроде:

$("#content").html('something');

Также html()или у append()функции нет обратного вызова.

Какие-либо предложения?

Это события мутации .

Я не использовал API-интерфейсы событий мутаций в jQuery, но беглый поиск привел меня к этому проекту на GitHub. Я не знаю о зрелости проекта.

Я знаю, что этому посту год, но я хотел бы предложить другой подход к решению тем, у кого есть аналогичная проблема:

1. Событие изменения jQuery используется только в полях ввода пользователя, потому что, если манипулируют чем-то еще (например, div), эта манипуляция исходит из кода. Итак, найдите, где происходит манипуляция, а затем добавьте туда все, что вам нужно.

2. Но если это невозможно по какой-либо причине (вы используете сложный плагин или не можете найти возможности «обратного вызова»), то подход jQuery, который я предлагаю, выглядит следующим образом:

   а. Для простых манипуляций с DOM используйте jQuery chaining and traversing,$("#content").html('something').end().find(whatever)....

   б. Если вы хотите сделать что-то еще, используйте jQuery bindс настраиваемым событием иtriggerHandler

   $("#content").html('something').triggerHandler('customAction');
   
   $('#content').unbind().bind('customAction', function(event, data) {
      //Custom-action
   });
   

Вот ссылка на обработчик триггера jQuery: http://api.jquery.com/triggerHandler/

Браузер не будет запускать событие onchange для <div>элементов.

Я думаю, что причина этого в том, что эти элементы не изменятся, если не будут изменены с помощью javascript. Если вам уже нужно изменить элемент самостоятельно (а не сам пользователь), вы можете просто вызвать соответствующий сопутствующий код одновременно с изменением элемента, например:

 $("#content").html('something').each(function() { });

Вы также можете вручную запустить событие, подобное этому:

 $("#content").html('something').change();

Если ни одно из этих решений не работает в вашей ситуации, не могли бы вы предоставить дополнительную информацию о том, чего вы конкретно пытаетесь достичь?

как насчет http://jsbin.com/esepal/2

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

Это событие устарело и заменено на Mutation Observer API.

Попробуйте выполнить привязку к DOMSubtreeModifiedсобытию seeign, поскольку тест также является частью DOM.

см. этот пост здесь, на SO:

как-сделать-я-контролировать-дом-для-изменений

Попробуйте это, он был создан Джеймсом Падолси (JP здесь, на SO) и делает именно то, что вы хотите (я думаю)

http://james.padolsey.com/javascript/monitoring-dom-properties/

А с HTML5 у нас есть собственные наблюдатели за мутациями DOM .

Это не совсем ответ jQuery, но его полезно упомянуть для отладки.

В Firebug вы можете щелкнуть правой кнопкой мыши элемент в дереве DOM и настроить «Прерывание при изменении атрибута»:

Когда в скрипте изменяется атрибут, появляется окно отладки, и вы можете отслеживать, что происходит. Также есть опция для вставки и удаления элементов ниже (бесполезно скрыта всплывающим окном на снимке экрана).

Я разрабатываю крошечную библиотеку JS под названием mutabor ( https://github.com/eskat0n/mutabor ), которая предназначена для упрощения использования событий мутации DOM. См. Примеры на demo.html.

Попробуйте плагин livequery. Кажется, это работает для чего-то подобного, что я делаю.

http://docs.jquery.com/Plugins/livequery

Часто простой и эффективный способ добиться этого - отслеживать, когда и где вы изменяете DOM.

Вы можете сделать это, создав одну центральную функцию, которая всегда отвечает за изменение DOM. Затем вы выполняете необходимую очистку измененного элемента из этой функции.

В недавнем приложении мне не требовались немедленные действия, поэтому я использовал обратный вызов для функции handly load (), чтобы добавить класс к любым измененным элементам, а затем обновлять все измененные элементы каждые несколько секунд с помощью таймера setInterval.

$($location).load("my URL", "", $location.addClass("dommodified"));

Тогда вы можете справиться с этим, как хотите - например,

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}

Вы можете добавить опцию обратного вызова к функции html (или любой другой):

$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
  fn = fn || function(){};
  var result =  this.oldHtml(html);
  fn();
  return result;
};
$('body').html(11,function(){alert("haha");});

Демо здесь.

Вы вносите изменения в какой-то элемент, а не элемент вынужден измениться чем-то, что вы должны уловить.

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

Итак, если вы используете сторонний код javascript или что-то в этом роде, и вам нужно знать, когда что-то появляется или изменяется при нажатии, тогда вы можете.

Допустим, что для приведенного ниже фрагмента вам нужно знать, когда содержимое таблицы изменяется после нажатия кнопки.

$('.button').live('click', function() {

            var tableHtml = $('#table > tbody').html();
            var timeout = window.setInterval(function(){

                if (tableHtml != $('#table > tbody').
                    console.log('no change');
                } else {
                    console.log('table changed!');
                    clearInterval(timeout);
                }

            }, 10);
        });

Псевдокод:

• Как только вы нажмете кнопку
• захватывается HTML-код элемента, который вы ожидаете изменить
• затем мы постоянно проверяем html элемента
• когда мы обнаруживаем, что html отличается, мы останавливаем проверку

Мы можем добиться этого с помощью событий мутации . Согласно сайту www.w3.org, модуль событий мутации предназначен для уведомления о любых изменениях в структуре документа, включая изменения атрибутов и текста. Подробнее СОБЫТИЯ МУТАЦИИ

Например :

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});

Невозможно, я считаю, что произошло событие, связанное с изменением содержимого, но это определенно не x-browser

Должен ли я сказать, что невозможно без каких-то неприятных интервалов в фоновом режиме!