216 BoqBoq [2013-03-27 14:25:00]
У меня есть div, содержимое которого постоянно меняется, будь то ajax requests , jquery functions , blur т.д. И т.д.
Есть ли способ, которым я могу обнаружить любые изменения в моем div в любой момент времени?
Я не хочу использовать интервалы или значение по умолчанию.
Нечто подобное сделало бы
11 ответов
329 iman [2013-04-30 07:41:00]
Если вы не хотите использовать таймер и проверить innerHTML, вы можете попробовать это событие
Более подробная информация и данные о поддержке браузера находятся здесь.
Внимание: в новых версиях jQuery bind() устарел, поэтому вместо него следует использовать on():
Вы можете попробовать это
но это может не работать в Internet Explorer, не проверял его
34 Artley [2017-03-15 11:57:00]
Вы ищете MutationObserver или События мутации. Ни одна из них не поддерживается повсюду и не слишком ласкает мир разработчиков.
Если вы знаете (и можете убедиться, что) размер div изменится, вы можете использовать событие изменения размера кроссбраузера.
21 PPB [2017-03-15 12:36:00]
Использование Javascript MutationObserver
Нет встроенного решения этой проблемы, это проблема с вашим шаблоном проектирования и кодирования.
Вы можете использовать шаблон издателя/подписчика. Для этого вы можете использовать специальные события jQuery или собственный механизм событий.
Теперь вы можете подписаться на события divhtmlchanging/divhtmlchanged, как показано ниже,
Теперь вы должны изменить свои изменения содержимого div с помощью этой функции changeHtml() . Таким образом, вы можете отслеживать или делать необходимые изменения соответственно, потому что аргумент данных обратного вызова привязки содержит информацию.
Вы должны изменить свой div html следующим образом:
А также вы можете использовать это для любых элементов html, кроме элемента ввода. В любом случае вы можете изменить это для использования с любым элементом (ами).
Рассмотрим следующую задачу: при клике на кнопку текст из .block_1 должен попадать в .block_2, а при изменении .block_2 в .block_3 должна появляться информация вида: было -> стало.
Пусть HTML данной задачи выглядит следующим образом:
Решение
Для того, что бы записать в .block_2 текст из .block_1 надо отследить событие click, но с .block_3 так не получится, ведь задача состоит в том, чтобы изменять содержимое .block_3 при изменении содержимого .block_2. В данном случае мы не можем отслеживать событие change, так как сам элемент не меняется, меняется его содержимое, поэтому необходимо использовать DOMSubtreeModified:
В общем, jQuery предоставляет различные функции для обработки селекторов, свойств селектора и даже документов и т. Д.
Тогда как здесь используется событие изменения jquery для содержимого, доступного для редактирования.
Событие изменения jQuery:
Это происходит, когда значение элемента изменяется, и это событие вызывается немедленно, когда пользователь делает выбор с помощью мыши или когда поле теряет фокус.
Синтаксис:
Содержание редактируемое:
Редактируемый контент в основном является атрибутом для всех элементов HTML.
Когда этот атрибут имеет значение true, тогда этот элемент будет отображать редактируемое содержимое.
Когда оно ложно, редактируемый контент отключен.
Атрибут:
Пример 1:
Давайте рассмотрим пример программы для проверки того, что элемент является редактируемым или имеет атрибут «contenteditable», который имеет значение true или false, используя событие изменения jQuery.