JQuery Каждая функция не работает Как я ожидаю

Question

Я пытаюсь изменить значения таблиц в событии изменения. Когда .woocommerce-variation огонь, новое соотношение рассчитывается путем умножения totalvaluefirst. Затем введите totalvaluelast, чтобы установить текст. Но когда запускается второе событие, totalvaluefirst остается неизменным и текст не изменяется.

jQuery('.woocommerce-variation').bind("DOMSubtreeModified",function(){   
    jQuery(".total-value").each(function() { 
     var totalvaluefirst = (jQuery(this).text()); 

     var totalvaluefirstnew = ratio * totalvaluefirst; 
     var totalvaluelast = Math.round(totalvaluelast * Math.pow(10, 2))/Math.pow(10, 2); 
     jQuery(this).text(totalvaluelast); 
    }); 
}); 

Answer 1

Смотрите также https://jsfiddle.net/ngfkqbvt/

Я добавил гарантию: если вы изменяете РОМ путем изменения полного значения это не должно привести к повторной обработке события DOM.

HTML:

<div class="woocommerce-variation"> 
    <div class="row">1 
    <div class="single-value"> 
    11 
    </div> 
    <div class="total-value"> 

    </div> 
    <div class="row">2 
    <div class="single-value"> 
    20 
    </div> 
    <div class="total-value"> 

    </div> 
    </div> 
</div> 

JavaScript:

var ratio = 3.0; 
var modifyingDOM = false; 
jQuery('.woocommerce-variation').bind("DOMSubtreeModified",function(){ 
    if(modifyingDOM) 
    return; 
    modifyingDOM = true; 
    jQuery(this).find(".row").each(function() { 
     var totalvaluefirst = parseInt(jQuery(this).find(".single-value").text()); 

     var totalvaluefirstnew = ratio * totalvaluefirst; 
     var totalvaluelast = Math.round(totalvaluefirstnew * Math.pow(10, 2))/Math.pow(10, 2); 
     jQuery(this).find(".total-value").text(totalvaluelast); 
    }); 
    modifyingDOM = false; 
}); 

//change the DOM 
jQuery('.woocommerce-variation').trigger("DOMSubtreeModified");