Jquery各関数が動作しない

Question

私はchangeイベントでテーブル値を変更しようとしています。 .woocommerce-variationが発火した場合、新しい比率はtotalvaluefirstを乗算して計算されます。次に、totalvaluelastを使用してテキストを設定します。しかし、2回目のイベントが発生した場合、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イベントの繰り返し処理につながるべきではありません合計値を変更することで、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：廃止されました.bind`

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