jQuery Call a function when content of a div changes

Question

I have a span:

<span class="basket_amount">65.70</span>

This span is updated via an external script. If the amount changes I want to trigger a javascript function.

$(document).ready(function(){
    $('.basket_amount').on('change', function() {
        versandkosten();
    });  
});

Currently it does not work. But why?

Thanks a lot!

Answer 1

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