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/