jQuery Call a function when content of a div changes

The accepted answer uses the DOMSubtreeModified event, which is now deprecated.

Here is an updated answer using its replacement, the MutationObserver object.

$(document).ready(function(){
var observer = new MutationObserver(function(e) {versandkosten();});
observer.observe($('.basket_amount')[0], {characterData: true, childList: true});
});

Fiddle sample https://jsfiddle.net/9our3m8a/257/

See also https://javascript.info/mutation-observer


Try this one

 $('.basket_amount').bind("DOMSubtreeModified",function(){
      versandkosten();
    });

Meanwhile deprecated! While this should still work, be aware that DOMSubtreeModified has been deprecated see also Mozilla Doc. Thx to @LuisEduardox for pointing this out.

The original post: If possible I would try to call the wished function from the other script. But if you really want to listen for changes on the element you can make use of DOMSubtreeModified. If you change the content via jQuery though it will call your function twice! Therefore use vanilla JavaScript for changing the content.

function versandkosten() {
    console.log('called versandkosten');
}
$(document).ready(function(){
  var $basketAmount = $('.basket_amount');
  $basketAmount.bind("DOMSubtreeModified", versandkosten);

  // test changing the content of the element via JavaScript
  $basketAmount[0].innerHTML = 77;

  // changing it via jQuery would call it twice!
  // $basketAmount.html(77);
});

Fiddle: https://jsfiddle.net/9our3m8a/

Tags:

Jquery