CODEWITHSUNDEEP
jquery
Philipp
Philipp

Reputation: 93

jQuery Call a function when content of a div changes

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!

Upvotes: 9

Views: 29368

Answers (3)

Michael Troger
Michael Troger

Reputation: 3497

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/

Upvotes: 6

Julius
Julius

Reputation: 397

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

Upvotes: 8

Nasir
Nasir

Reputation: 431

Try this one 

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

Upvotes: 5

Related Questions