jQuery的调用函数的一个div变化时的内容

Question

我有一个跨度：

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

这个跨度是通过外部脚本更新。如果量的变化我想触发JavaScript函数。

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

目前，这是行不通的。但为什么？

非常感谢！

Answer 1

如果可能的话我会尝试从其他脚本调用希望的功能。但如果你真的要听的元素进行更改，您可以利用DOMSubtreeModified的。如果你改变通过jQuery的内容，虽然它会调用你的函数两次！因此使用香草JavaScript来改变内容。

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);
});

小提琴：https://jsfiddle.net/9our3m8a/

编辑：尽管这仍然应该工作，要知道，DOMSubtreeModified已被弃用，另见Mozilla Doc。 THX到@LuisEduardox指出这一点。

Answer 2

试试这个

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

Answer 3

该接受的答案使用DOMSubtreeModified，现在贬值。这里是一个更新的答案。

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

小提琴样本https://jsfiddle.net/9our3m8a/257/