jQuery подія: виявляє зміни до html / тексту діла

У мене є DIV , який має свій зміст весь час змінюється, будь то ajax requests, jquery functions, і blurт.д. і т.п.

Чи є спосіб я виявити будь-які зміни в своєму діві в будь-який момент часу?

Я не хочу використовувати перевірені інтервали або значення за замовчуванням.

Щось подібне зробило б

$('mydiv').contentchanged() {
 alert('changed')
}

Якщо ви не хочете використовувати таймер і перевірити внутрішній HTML, ви можете спробувати цю подію

$('mydiv').bind('DOMSubtreeModified', function(){
  console.log('changed');
});

Детальніше та дані про підтримку веб-переглядача - тут .

Увага: у новіших версіях jQuery bind () застаріле, тому замість цього слід використовувати на ():

$('body').on('DOMSubtreeModified', 'mydiv', function(){
  console.log('changed');
});

Використання Javascript MutationObserver

  //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
var target = document.querySelector('mydiv')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log($('mydiv').text());   
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);

Оскільки $("#selector").bind()застаріло , ви повинні використовувати:

$("body").on('DOMSubtreeModified', "#selector", function() {
    // code here
});

Ви можете спробувати це

$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {

});

але це може не працювати в Internet Explorer, не перевіряли його

Ви шукаєте MutationObserver або Mutation Events . Ніхто не підтримується скрізь, а світ розробника не надто прихильно сприймається.

Якщо ви знаєте (і можете переконатися, що) розмір div зміниться, можливо, ви зможете використовувати подію зміни розміру крос-браузера .

Наступний код працює для мене.

$("body").on('DOMSubtreeModified', "mydiv", function() {
    alert('changed');
});

Сподіваюся, це комусь допоможе :)

Вбудованого рішення цієї проблеми немає, це проблема з вашим дизайном та кодуванням.

Ви можете використовувати шаблон видавця / підписника. Для цього ви можете використовувати власні події jQuery або власний механізм подій.

Перший,

function changeHtml(selector, html) {
    var elem = $(selector);
    jQuery.event.trigger('htmlchanging', { elements: elem, content: { current: elem.html(), pending: html} });
    elem.html(html);
    jQuery.event.trigger('htmlchanged', { elements: elem, content: html });
}

Тепер ви можете підписатися на події divhtmlchanging / divhtmlchanged наступним чином,

$(document).bind('htmlchanging', function (e, data) {
    //your before changing html, logic goes here
});

$(document).bind('htmlchanged', function (e, data) {
    //your after changed html, logic goes here
});

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

Ви повинні змінити HTML свого div, як це;

changeHtml('#mydiv', '<p>test content</p>');

Крім того, ви можете використовувати це для будь-яких html-елементів, крім елемента введення. У будь-якому випадку ви можете змінити це для використання з будь-якими елементами.

Використовуйте MutationObserver, як показано в цьому фрагменті, наданому Mozilla та адаптованому з цього допису в блозі

Крім того, ви можете використовувати приклад JQuery, який бачите в цьому посиланні

Chrome 18+, Firefox 14+, IE 11+, Safari 6+

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

Ви можете зберігати старий InternalHTML div в змінній. Встановіть інтервал, щоб перевірити, чи відповідає старий вміст поточному вмісту. Коли це неправда, роби щось.

Спробуйте MutationObserver:

• https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/
• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

підтримка браузера: http://caniuse.com/#feat=mutationobserver

<html>
  <!-- example from Microsoft https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/ -->

  <head>
    </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}
      
// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

      // the target to watch, this could be #yourUniqueDiv 
      // we use the body to watch for changes
var targetObject = document.body; 
      
// Register the target node to observe and specify which DOM changes to watch
      
      
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


      </script>
    </body>
  </html>

Додавання деякого вмісту до div, чи через jQuery, або через de DOM-API безпосередньо, за замовчуванням .appendChild()функція. Що ви можете зробити, це перекрити .appendChild()функцію поточного об'єкта та запровадити в ньому спостерігач. Тепер, скасувавши нашу .appendChild()функцію, нам потрібно запозичити цю функцію у іншого об’єкта, щоб мати змогу додавати вміст. Для цього ми закликаємо .appendChild()інший div, щоб остаточно додати вміст. Звичайно, це враховується і для .removeChild().

var obj = document.getElementById("mydiv");
    obj.appendChild = function(node) {
        alert("changed!");

        // call the .appendChild() function of some other div
        // and pass the current (this) to let the function affect it.
        document.createElement("div").appendChild.call(this, node);
        }
    };

Тут ви можете знайти наївний приклад. Ви можете продовжити його самостійно, мабуть. http://jsfiddle.net/RKLmA/31/

До речі: це показує, що JavaScript відповідає принципу OpenClosed. :)