Question

我有一个范围：

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

此范围通过外部脚本更新。如果金额发生变化，我想触发一个javascript函数。

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

目前它不起作用。但为什么呢？

非常感谢！

Answer 1

如果可能的话，我会尝试从其他脚本调用所希望的函数。但如果你真的想听取元素的变化，可以使用DOMSubtreeModified。如果你通过jQuery更改内容，虽然它会调用你的函数两次！因此，使用vanilla 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。感谢@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/

jQuery在div的内容发生变化时调用函数

3 个答案: