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

Ответ 1

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

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

Ответ 2

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

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

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

  а. Для простой манипуляции с DOM используйте цепочку jQuery и перемещение, $("#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/

Ответ 3

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

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

Это событие устарело в пользу API-интерфейс Mutation Observer

Ответ 4

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

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

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

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

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

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

Ответ 5

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

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

how-do-i-monitor-the-dom-for-changes

Ответ 6

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

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

Ответ 7

И с HTML5 мы имеем встроенные наблюдатели MOM-данных DOM.

Ответ 8

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

В Firebug вы можете щелкнуть правой кнопкой мыши по элементу в дереве DOM и настроить "Break on Attribute Change":

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

Ответ 9

Попробуйте плагин livequery. Это похоже на то, что я делаю.

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

Ответ 10

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

Ответ 11

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

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

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

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

Затем вы можете обрабатывать его, как хотите - например,

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

Ответ 12

Вы можете добавить функцию обратного вызова в 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");});

Демо здесь.

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

Ответ 13

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

Итак, если вы используете сторонний код 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 будет другим, мы останавливаем проверку

Ответ 14

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

Пример:

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

Ответ 15

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

Если я скажу, что это невозможно без какого-либо неприятного интервала, отрывающегося в фоновом режиме!