Виявити зміни вмісту елементів за допомогою jQuery

change() функція працює і виявляє зміни на елементах форми, але чи існує спосіб виявлення, коли змінено вміст елемента DOM?

Це не працює, якщо не #contentє елементом форми

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

Я хочу, щоб це спрацьовувало, роблячи щось на кшталт:

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

Крім того, html()чи append()функція не мають зворотної виклику.

Будь-які пропозиції?

Це події мутації .

Я не використовував API подій мутації в jQuery, але побіжний пошук привів мене до цього проекту в GitHub. Я не знаю про зрілість проекту.

Я знаю, що цій посаді рік, але я хотів би запропонувати інший підхід до вирішення питань, які мають подібне питання:

1. Подія зміни jQuery використовується лише у полях введення користувача, оскільки якщо що-небудь інше маніпулюється (наприклад, div), ця маніпуляція походить від коду. Отже, знайдіть, де відбувається маніпуляція, а потім додайте туди все, що вам потрібно.

2. Але якщо це неможливо з будь-якої причини (ви використовуєте складний плагін або не можете знайти жодних можливостей «зворотного виклику»), тоді я запропонував би підхід 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/

Веб-переглядач не запускає подію зміни на <div>елементи.

Я думаю, що аргументація цього полягає в тому, що ці елементи не змінюватимуться, якщо не будуть змінені JavaScript. Якщо вам вже доводиться самостійно змінювати елемент (а не користувач, який це робить), ви можете просто зателефонувати відповідному супроводжувальному коду одночасно, коли ви модифікуєте елемент, наприклад:

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

Ви також можете вручну запустити подію на зразок цієї:

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

Якщо жодне з цих рішень не підходить для вашої ситуації, ви можете, будь ласка, дати більше інформації про те, що ви конкретно намагаєтесь досягти?

як щодо http://jsbin.com/esepal/2

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

Ця подія застаріла на користь API Mutation Observer

Постарайтеся прив’язати себе до DOMSubtreeModifiedзнаку події, оскільки тест також є лише частиною DOM.

дивіться цю публікацію тут на SO:

як-робити-я-монітор-дом-для змін

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

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

І з HTML5 ми маємо нативних спостерігачів мутацій DOM .

Це не суто відповідь jQuery - але корисно згадати для налагодження.

У Firebug можна клацнути правою кнопкою миші елемент на дереві DOM та встановити "Перерва на зміну атрибутів":

Коли атрибут змінено в сценарії, з'явиться вікно налагодження, і ви можете відстежити, що відбувається. Також є опція для вставки елементів та видалення елементів нижче (ненавмисне затемнення спливаючого вікна в екрані екрана).

Я розробляю крихітну бібліотеку JS під назвою mutabor ( https://github.com/eskat0n/mutabor ), яка спрямована на спрощення використання подій мутації DOM. Див. Demo.html для прикладів.

Спробуйте плагін livequery. Це, здається, працює на щось подібне, що я роблю.

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

Часто простим та ефективним способом досягти цього є відстеження того, коли і де ви змінюєте DOM.

Це можна зробити, створивши одну центральну функцію, яка завжди відповідає за зміну DOM. Потім ви робите все необхідне очищення модифікованого елемента в межах цієї функції.

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

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

Тоді ви можете впоратися з нею як завгодно - наприклад

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

Ви можете додати опцію зворотного дзвінка до 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");});

Демо тут.

Ви робите зміни на якомусь елементі, а не елемент змушений змінюватися чимось, що вам доведеться зловити.

Я написав фрагмент, який перевірить на зміну елемента події.

Отже, якщо ви використовуєте код JavaScript 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 відрізняється, ми припиняємо перевірку

Ми можемо досягти цього, використовуючи мутаційні події . За даними www.w3.org, модуль події мутації розроблений, щоб дозволяти повідомляти про будь-які зміни в структурі документа, включаючи зміни attr та текст. Детальніше МУТАЦІЙНІ ПОДІЇ

Наприклад :

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

Неможливо, я вважаю, що є подія, змінена змістом, але це, звичайно, не x-браузер

Чи варто сказати, що це неможливо без якогось неприємного інтервалу, відбиваючись на задньому плані!