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

StackOverflow https://stackoverflow.com/questions/1960919

Вопрос

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

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

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

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

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

Это было полезно?

Решение

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

Другие советы

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

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

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

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

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

Воспринимайте это как рабочая демо здесь

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

связь:http://code.google.com/p/mutation-summary/

оболочка jquery:https://github.com/joelpurra/jquery-mutation-summary

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top