jQuery watch div

Есть ли способ посмотреть, изменится ли содержимое в div?

Скажем, у меня есть:

Some content here

Которое через 5 секунд изменится на:

 
  • This is totally different!

Как я могу получить уведомление об этом через обратный вызов или что-то еще? Я могу в большинстве случаев получить javascript, который делает вставку, чтобы сказать мне. Но я хотел знать, возможно ли это.

6 Solutions collect form web for “jQuery watch div”

Метод jQuery .change () работает только для полей формы.

Я написал для вас небольшой плагин jQuery:

      

Testing it: (click on divs to change contents)

Hi
Ho
He
He
He

Имейте в виду, что это отслеживает изменения только содержимого элемента (html), а не атрибутов.

Не существует встроенного события jQuery / DOM, которое будет срабатывать при изменении содержимого HTML / DOM.

Вы могли бы (если вы чувствуете себя особенно расточительно) сделать что-то вроде этого:

 $(function() { var $div = $("#hello"); var html = $div.html(); var checking = setInterval(function() { var newhtml = $div.html(); if (html != newhtml) { myCallback(); html = newhtml; } },100); function myCallback() { alert('content changed!'); // if you only want it to fire once, uncomment the following: // clearInterval(checking); } }); 

Просто помните, что вызов .html() каждые 100 мс, вероятно, не самая лучшая идея для производительности ваших сайтов.

jsFiddle макет

Может быть, разумно отслеживать источник событий, которые изменяют содержание вашего слоя (ов)? Скажем, пользователь нажал где-нибудь (прочитайте, «сделал щелчок») после того, как содержимое могло измениться. Поэтому, если вы проверите .html () после клика, а не используете цикл, это может сэкономить некоторые системные ресурсы.

Кто / что изменит это? Если это какой-то JS, который вы контролируете, используйте это, чтобы также вызвать ваш обратный вызов. Очевидно, пользователь не может изменить это.

Если вы хотите просмотреть элемент т. Д., Используйте событие «change». Версия jQuery здесь: http://api.jquery.com/change/

Вот пример кода, который вызывает простое предупреждение при изменении заданного значения:

 < !DOCTYPE html>   watchu, watchu, watchu want, watchu want?   
Hello World!

Есть некоторые события, называемые DOMNodeInserted , DOMNodeRemoved и DOMSubtreeModified . В какой проверке добавляются или удаляются какие-либо элементы или изменяется внутренний HTML-код внутри div. для этого вам нужна функция setInterval() .

  function DivChange() { $('#YourDiv').bind('DOMNodeInserted DOMNodeRemoved', function (event) { if (event.type == 'DOMNodeInserted') { alert('Content added'); } else if (event.type == 'DOMNodeRemoved') { alert('Content removed'); } else { alert('Inner Html changed for some content'); } }); } var DivTimer = setInterval(DivChange, 1000); 

Вышеуказанные функции будут проверять Div для любого изменения контента, для каждой секунды

Примечание. Эти события не поддерживаются IE

  • Отправить форму с помощью jQuery
  • Что возвращает jquery $?
  • Как отменить / прервать запрос JQuery AJAX?
  • jQuery: удалить элемент, кроме внутреннего элемента
  • Как прокручивать страницу вверх или вниз на якорь с помощью jQuery?
  • jQuery ui datepicker с Angularjs
  • Должен jQuery $ (form) .submit (); не запускать onSubmit в теге формы?
  • Ссылки Fancybox не отображаются в лайтбокс - что мне не хватает?
  • Автовоспроизведение видео HTML5 в мобильном браузере
  • Как настроить данные для Rails с помощью JQuery
  • Эффект jQuery .slideRight
  • Давайте будем гением компьютера.