jQuery следит за изменениями domElement? - PullRequest
Новая
       15

jQuery следит за изменениями domElement?

33 голосов
/ 25 декабря 2009

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

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

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

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

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

Ответы [ 4 ]

39 голосов
/ 23 марта 2012

Самый эффективный способ, который я нашел, - это привязка к событию 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 будет работать в простых реализациях.

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

6 голосов
/ 28 марта 2011

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

Имея немного больше взгляда Shiki ответ на jquery слушает изменения внутри div и ведет себя соответственно look вроде бы надо делать что хочешь: 

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

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

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

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

3 голосов
/ 14 августа 2012

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

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

jquery обертка: https://github.com/joelpurra/jquery-mutation-summary

3 голосов
/ 25 декабря 2009

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

...