jQuery Olayı: Bir div'ın html / metnindeki değişiklikleri algılama

İçeriği her zaman değişen bir divim var ajax requests, olsun jquery functions, blurvb.

Div'imde herhangi bir zamanda herhangi bir değişikliği tespit edebilmemin bir yolu var mı?

Kontrol edilen herhangi bir aralık veya varsayılan değer kullanmak istemiyorum.

Böyle bir şey yapardı

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

Zamanlayıcı kullanmak ve innerHTML'yi kontrol etmek istemiyorsanız bu etkinliği deneyebilirsiniz

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

Daha fazla ayrıntı ve tarayıcı desteği verileri burada .

Dikkat: daha yeni jQuery sürümlerinde bind () kullanımdan kaldırılmıştır, bunun yerine on () öğesini kullanmalısınız:

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

Javascript MutationObserver kullanma

  //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);

Yana $("#selector").bind()kullanımdan kaldırılmıştır , kullanmak gerekir:

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

Bunu deneyebilirsin

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

});

ama bu internet explorer'da çalışmayabilir, test etmedim

MutationObserver veya Mutation Etkinlikleri arıyorsunuz . Ne her yerde destekleniyor ne de geliştirici dünya tarafından çok seviliyor.

Div'in boyutunun değişeceğini biliyorsanız (ve bundan emin olabilirseniz), tarayıcılar arası yeniden boyutlandırma etkinliğini kullanabilirsiniz .

Aşağıdaki kod benim için çalışıyor.

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

Birisine yardımcı olacağını umuyoruz :)

Bu sorunun dahili bir çözümü yoktur, bu tasarım ve kodlama deseninizle ilgili bir sorundur.

Yayıncı / abone kalıbını kullanabilirsiniz. Bunun için jQuery özel etkinliklerini veya kendi etkinlik mekanizmanızı kullanabilirsiniz.

İlk,

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 });
}

Artık divhtmlchanging / divhtmlchanged etkinliklerine aşağıdaki gibi abone olabilirsiniz,

$(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
});

Şimdi, div içeriği değişikliklerinizi bu changeHtml()işlev aracılığıyla değiştirmeniz gerekir . Bu nedenle, bilgileri içeren geri arama verisi bağımsız değişkenini bağlama nedeniyle gerekli değişiklikleri izleyebilir veya yapabilirsiniz.

Div'inizin html'sini şu şekilde değiştirmeniz gerekir;

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

Ayrıca, bunu giriş öğesi hariç herhangi bir html öğesi için kullanabilirsiniz. Her neyse, bunu herhangi bir öğeyle kullanmak için değiştirebilirsiniz.

Mozilla tarafından sağlanan ve bu blog yayınından uyarlanan bu snippet'te görüldüğü gibi MutationObserver'ı kullanın

Alternatif olarak, bu bağlantıda görülen JQuery örneğini kullanabilirsiniz

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();

Div öğesinin eski innerHTML'sini bir değişkende saklayabilirsiniz. Eski içeriğin geçerli içerikle eşleşip eşleşmediğini kontrol etmek için bir aralık ayarlayın. Bu doğru olmadığında bir şey yapın.

MutationObserver'ı deneyin:

• 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

tarayıcı desteği: 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>

Bir div'e, jQuery veya doğrudan DOM-API yoluyla bir miktar içerik eklemek varsayılan olarak .appendChild()işlevin varsayılan değeridir . Yapabileceğiniz şey, .appendChild()mevcut nesnenin işlevini geçersiz kılmak ve bu nesneye bir gözlemci uygulamaktır. Şimdi .appendChild()işlevimizi geçersiz kıldığımızda, içeriği ekleyebilmek için bu işlevi başka bir nesneden ödünç almamız gerekiyor. Bu nedenle .appendChild(), içeriği eklemek için başka bir div adını veriyoruz. Tabii ki, bu da önemlidir .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);
        }
    };

Burada naif bir örnek bulabilirsiniz. Bunu kendiniz uzatabilirsiniz sanırım. http://jsfiddle.net/RKLmA/31/

Bu arada: Bu JavaScript'in OpenClosed prensibine uygun olduğunu gösterir. :)