JQuery часы для изменений domElement?

У меня есть обратный вызов ajax, который вставляет HTML-разметку в div нижнего колонтитула.

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

В идеале мне бы хотелось, чтобы какой-то обработчик событий был похож на $('#myDiv').ContentsChanged(function() {...}) или $('#myDiv').TriggerWhenContentExists( function() {...})

Я нашел плагин под названием watch и улучшенную версию этого плагина, но так и не смог заставить его сработать. Я пытался "наблюдать" за всем, что мог придумать (т.е. Свойство высоты div, изменяемого посредством инъекции ajax), но не смог заставить их что-либо делать вообще.

Есть мысли/помощь?

Ответы

Ответ 1

Наиболее эффективным способом, который я нашел, является привязка к событию DOMSubtreeModified. Он хорошо работает как с jQuery $.html(), так и с помощью стандартного свойства JavaScript innerHTML.

$('#content').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

http://jsfiddle.net/hnCxK/

При вызове из jQuery $.html() я обнаружил, что событие срабатывает дважды: один раз для очистки существующего содержимого и один раз для его установки. Быстрый .length -check будет работать в простых реализациях.

Также важно отметить, что при установке в строку HTML (т.е. '<p>Hello, world</p>') событие будет всегда. И что событие будет < при изменении для строк с обычным текстом.

Ответ 2

Вы можете прослушивать изменения элементов DOM (например, div), привязывая к DOMCharacterDataModified, протестированным в хром, но не работает в IE, см. демо здесь
Щелчок по кнопке вызывает изменение в div, который просматривается, что, в свою очередь, заполняет другой div, чтобы показать вам свою работу...

Получив немного больше, посмотрите Shiki на jquery, прослушайте изменения в пределах div и действовать соответственно, похоже, что он должен делать то, что вы хотите:

$('#idOfDiv').bind('contentchanged', function() {
    // do something after the div content has changed
    alert('woo');
});

В вашей функции, которая обновляет div:

$('#idOfDiv').trigger('contentchanged');

Смотрите здесь как рабочая демонстрация здесь

Ответ 3

Возможно, вы захотите изучить событие DOMNodeInserted для Firefox/Opera/Safari и событие onpropertychange для IE. Вероятно, было бы не слишком сложно использовать эти события, но это может быть немного хак-иш. Вот некоторая документация по событиям javascript: http://help.dottoro.com/larrqqck.php

Ответ 4

Существует аккуратная библиотека javascript, мутация-сводка google, которая позволяет вам кратко осматривать dom изменения. Самое замечательное в том, что, если вы хотите, вы можете быть проинформированы только о действиях, которые фактически повлияли на DOM, чтобы понять, что я имею в виду, вы должны смотреть очень информативное видео на главной странице проекта.

ссылка: http://code.google.com/p/mutation-summary/

Обозреватель jquery: https://github.com/joelpurra/jquery-mutation-summary