将事件监听器添加到HTML span标签

Question

I have a shopping cart in an ecommerce and when the value of the shopping cart alters a banner appears different for each value.

The js will just run and show the correct banner when the page reload one (this occurs when the customer adds another product in the cart).

But when the client only changes the amount of products or remove a product from the cart page does not reload the one then thought of using the event listener.

Except my problem is that the value ($) is inside a tag <span> $ value </ span> and not within an imput, so I can not make the event listener function.

How can I apply this? The code is below:

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

My Guess is, the listener is not getting updated. Try doing

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