Есть ли способ - с помощью jQuery или иначе - для мониторинга DOM для вставки, удаления, обновления стилей и т.д.
Как контролировать DOM для изменений?
Ответ 1
См. здесь элементы "MutationEvent": https://developer.mozilla.org/en/DOM/DOM_event_reference, но они устарели.
jQuery теперь имеет способ присоединить события к существующим и будущим элементам, соответствующим селектору: http://docs.jquery.com/Events/live#typefn
Это может быть трюк, который вы могли бы использовать из-за отсутствия надлежащей информации о модификации DOM Node.
Ответ 2
Смотрите библиотеку mutation-summary. Он построен поверх нового API браузера под названием DOM Mutation Observers.
Ответ 3
Это только для целей отладки:
Firebug в настоящее время позволяет устанавливать точки останова на узлах html.
Вам нужно открыть html-инспектор, щелкнуть правой кнопкой мыши по node, и у вас есть следующие возможности:
- Прерывание при изменении атрибута
- Прерывание при добавлении/удалении дочернего элемента
- Прерывание при удалении
Как только вы достигнете точки останова, вы также можете просмотреть стек вызовов.
У Google Chrome есть аналогичная функция.
Ответ 4
Недавно я написал плагин, который делает именно это - jquery.initialize
Вы используете его так же, как .each
function
$(".some-element").initialize( function(){
$(this).css("color", "blue");
});
Отличие от .each
- это ваш селектор, в данном случае .some-element
и ждать новых элементов с этим селектором в будущем, если такой элемент будет добавлен, он также будет инициализирован.
В нашем случае функция инициализации просто меняет цвет элемента на синий. Поэтому, если мы добавим новый элемент (неважно, если с ajax или даже инспектором F12 или что-то еще):
$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!
Плагин начнет его немедленно. Также плагин гарантирует, что один элемент инициализируется только один раз. Поэтому, если вы добавите элемент, затем .deatch()
его из тела, а затем добавьте его снова, он не будет инициализирован снова.
$("<div/>").addClass('some-element').appendTo("body").detach()
.appendTo(".some-container");
//initialized only once
Плагин основан на MutationObserver
- он будет работать на IE9 и 10 с зависимостями, как описано на странице readme.