javascript - 将事件监听器添加到 HTML span 标记

Question

我在电子商务中有一个购物车，当购物车的值发生变化时，每个值的横幅都不同。

当页面重新加载一个时，js 将运行并显示正确的横幅(当客户在购物车中添加另一个产品时会发生这种情况)。

但是当客户只改变产品的数量或从购物车页面中删除产品并没有重新加载时，就想到了使用事件监听器。

除了我的问题是值($)在标签内 <span> $ value </ span>而不是在一个输入中，所以我不能使事件监听器函数。

我该如何应用它？代码如下:

jQuery(document).ready(function(){
 setTimeout(function(){
    trocaBannerCarrinho();
 }, 5000);

//here is the event listener that does not work!! 
jQuery("#value_total").on("change", function(){
   trocaBannerCarrinho();
}); 
});


function trocaBannerCarrinho(){

// condições para exibir os banners
var valor_cond1 = {min: 1, max: 980};//banner 1
var valor_cond2 = {min: 981, max: 1280};//banner 2
var valor_cond3 = {min: 1281, max: 1580};//banner 3
var valor_cond4 = {min: 1581, max: 1980};//banner 4
var valor_cond5 = {min: 1981};//banner 5

// recuperando o valor do carrinho
var total_carrinho = jQuery("#value_total").html();

// removendo R$, o ponto e trocando a virgula por um ponto
// o resultado final fica assim: 35.00, 1900.99, 20000.58, etc...
total_carrinho = total_carrinho.replace(/\s/g,'').replace('R$','').replace('.','').replace(',','.');

if ((total_carrinho >= valor_cond1.min) && (total_carrinho <= valor_cond1.max)) {
    jQuery('iframe[id^="google_ads_iframe_"]').contents().find('#banner1').show();

} else if ((total_carrinho >= valor_cond2.min) && (total_carrinho <= valor_cond2.max)) {
    jQuery('iframe[id^="google_ads_iframe_"]').contents().find('#banner2').show();

} else if ((total_carrinho >= valor_cond3.min) && (total_carrinho <= valor_cond3.max)) {
    jQuery('iframe[id^="google_ads_iframe_"]').contents().find('#banner3').show(); 

} else if ((total_carrinho >= valor_cond4.min) && (total_carrinho <= valor_cond4.max)) {
    jQuery('iframe[id^="google_ads_iframe_"]').contents().find('#banner4').show();

} else if (total_carrinho >= valor_cond5.min) {
    jQuery('iframe[id^="google_ads_iframe_"]').contents().find('#banner5').show();
}
}

Answer 1

我的猜测是，监听器没有得到更新。尝试做

jQuery("document").on("change", '#value_total' ,function(){
   trocaBannerCarrinho();
});