Check if div child elements changes

Question

I don't get it. Shouldn't this code work?

Here the HTML-Code


    7
    4
    11
    14
    2
    5
    2
    6
    div data-rollid="283593" class="ball ball-8">13
    3

And here the jQuery-Code

$('#past').one('DOMSubtreeModified', function() {
    var stuff = $('#panel8-14 .mytotal').html();
    var test = '-';
    if( test.indexOf(stuff) >= 0){
        console.log('asdf');
    }
    else{
        console.log('nope');
}

});

The Problem is:

When i do it with this code and use the .one() function then it calls the function only once at the first loading and not when the div content changes...
When i do it with .bind or with .on then i gives it back 2 times...

guest271314 · Accepted Answer

You can use MutationObserver

var target = $("#past").get(0);

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {

    if (mutation.removedNodes.length) {
      console.log("removed nodes", mutation.removedNodes[0].nodeValue);
      alert("removed nodes");
    }

    if (mutation.addedNodes.length) {
      alert("added nodes");
      console.log("added nodes", mutation.addedNodes[0].nodeValue);
    }

  });
});

var config = {
  childList: true,
  subtree: true,
  characterData: true
};

observer.observe(target, config);

$("#past div:first").text(1); // do stuff

Check if div child elements changes

Answers (1)

Related Questions