Обнаружение изменений содержимого элемента с помощью jQuery

Question

Обнаружение изменений содержимого элемента с помощью jQuery

change() Функция работает и обнаруживает изменения в элементах формы, но есть ли способ определить, когда содержимое элемента DOM было изменено?

Это не работает, если #content это элемент формы

$("#content").change( function(){
    // do something
});

Я хочу, чтобы это срабатывало при выполнении чего-то вроде:

$("#content").html('something');

Также html() или же append() функция не имеет обратного вызова

Какие-либо предложения?

115

javascript jquery dom

Источник

user95353 07 июл '09 в 10:57

15 ответов

Решение

Я знаю, что этому посту исполнился год, но я бы хотел предложить иной подход к решению для тех, у кого похожая проблема:

Событие изменения jQuery используется только для пользовательских полей ввода, потому что, если что-то еще обрабатывается (например, div), эта манипуляция исходит из кода. Итак, найдите, где происходит манипуляция, а затем добавьте туда все, что вам нужно.
Но если это невозможно по какой-либо причине (вы используете сложный плагин или не можете найти какие-либо возможности "обратного вызова"), то я бы предложил следующий подход jQuery:
а. Для простой манипуляции с DOM используйте jQuery цепочки и обходы, $("#content").html('something').end().find(whatever)....
б. Если вы хотите сделать что-то еще, используйте JQuery's bind с пользовательским событием и triggerHandler
```
$("#content").html('something').triggerHandler('customAction');

$('#content').unbind().bind('customAction', function(event, data) {
   //Custom-action
});
```

Вот ссылка на обработчик триггера jQuery: http://api.jquery.com/triggerHandler/

70

Источник

user377856 01 сен '10 в 09:20

Как насчет http://jsbin.com/esepal/2

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

Это событие устарело в пользу API наблюдателя мутации

16

Источник

user175404 04 апр '12 в 13:27

Браузер не будет запускать событие onchange для <div> элементы.

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

 $("#content").html('something').each(function() { });

Вы также можете вручную запустить событие, подобное этому:

 $("#content").html('something').change();

Если ни одно из этих решений не подходит для вашей ситуации, не могли бы вы дать больше информации о том, что вы конкретно пытаетесь достичь?

15

Источник

user12983 07 июл '09 в 13:01

Попробуй привязать к DOMSubtreeModified Событие seeign as test также является частью DOM.

см. этот пост здесь на SO:

как-ду-я-монитор-The-дом-для-изменений

11

Источник

user119660 07 июл '09 в 11:08

Попробуйте это, это было создано Джеймсом Падолси (JP здесь на SO) и делает именно то, что вы хотите (я думаю)

http://james.padolsey.com/javascript/monitoring-dom-properties/

10

Источник

user35197 07 июл '09 в 12:35

А с HTML5 у нас есть собственные DOM Mutation Observers.

7

Источник

user95353 17 фев '12 в 12:56

Это не совсем ответ JQuery - но полезно упомянуть для отладки.

В Firebug вы можете щелкнуть правой кнопкой мыши по элементу в дереве DOM и установить "Break on Attribute Change":

Щелчок правой кнопкой мыши на элементе в Firebug с выделением разрыва при изменении атрибута

Когда атрибут изменяется в скрипте, появляется окно отладки, и вы можете отследить, что происходит. Ниже также есть опция для вставки элемента и удаления элемента (бесполезно скрыта всплывающим окном на снимке экрана).

3

Источник

user645677 13 мар '15 в 10:27

Я разрабатываю крошечную библиотеку JS под названием mutabor ( https://github.com/eskat0n/mutabor), предназначенную для упрощения использования событий мутации DOM. Смотрите demo.html для примеров.

2

Источник

user78316 08 апр '12 в 14:22

Попробуйте плагин livequery. Кажется, это работает для чего-то подобного, что я делаю.

http://docs.jquery.com/Plugins/livequery

2

Источник

user101876 24 янв '10 в 05:31

Зачастую простым и эффективным способом достижения этого является отслеживание того, когда и где вы модифицируете DOM.

Вы можете сделать это, создав одну центральную функцию, которая всегда отвечает за изменение DOM. Затем вы выполняете необходимую очистку измененного элемента из этой функции.

В недавнем приложении мне не требовалось немедленных действий, поэтому я использовал обратный вызов для функции handly load(), чтобы добавить класс к любым измененным элементам, а затем обновлять все измененные элементы каждые несколько секунд с помощью таймера setInterval.

$($location).load("my URL", "", $location.addClass("dommodified"));

Тогда вы можете справиться с этим, как вы хотите - например,

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}

1

Источник

user106118 05 авг '10 в 09:33

Вы можете добавить опцию обратного вызова в функцию html (или любую другую):

$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
  fn = fn || function(){};
  var result =  this.oldHtml(html);
  fn();
  return result;
};
$('body').html(11,function(){alert("haha");});

Демо здесь.

Вы вносите изменения в некоторый элемент, а элемент не вынужден меняться чем-то, что вам нужно поймать.

1

Источник

25 ноя '13 в 14:10

Я написал фрагмент, который проверит изменения элемента в событии.

Так что, если вы используете сторонний javascript-код или что-то еще, и вам нужно знать, когда что-то появляется или изменяется после нажатия, тогда вы можете.

Для приведенного ниже фрагмента предположим, что вам нужно знать, когда изменяется содержимое таблицы после нажатия кнопки.

$('.button').live('click', function() {

            var tableHtml = $('#table > tbody').html();
            var timeout = window.setInterval(function(){

                if (tableHtml != $('#table > tbody').
                    console.log('no change');
                } else {
                    console.log('table changed!');
                    clearInterval(timeout);
                }

            }, 10);
        });

Псевдокод:

Как только вы нажмете кнопку
захватывается HTML-код элемента, который вы ожидаете изменить
Затем мы постоянно проверяем HTML элемента
когда мы находим html другим, мы прекращаем проверку

0

Источник

user744975 23 май '14 в 10:17

Мы можем достичь этого, используя Mutation Events. Согласно www.w3.org, модуль событий мутации предназначен для уведомления о любых изменениях в структуре документа, включая изменения атрибутов и текста. Для более подробной информации MUTATION EVENTS

Например:

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});

0

Источник

user3894567 01 апр '17 в 06:25

Я думаю, что это невозможно, то есть событие изменилось, но это, конечно, не x-browser

Должен ли я сказать, что это невозможно без некоторого неприятного интервала, уходящего на задний план!

-3

Источник

user6440 07 июл '09 в 11:06

Другие вопросы по тегам javascript jquery dom

user2119053 07 июл '09 в 11:07 2009-07-07 11:07 · Accepted Answer · 2009-07-07 11:07

Это мутационные события.

Я не использовал API-интерфейсы событий мутации в jQuery, но беглый поиск привел меня к этому проекту на GitHub. Я не знаю о зрелости проекта.

26

Источник

user2119053 07 июл '09 в 11:07