Jquery 각 함수가 작동하지 않습니다. 내가 어떻게 예상합니까

Question

변경 이벤트에서 테이블 값을 변경하려고합니다. .woocommerce-variation 화재가 발생하면 totalvaluefirst을 멀티플 링하여 새 비율이 계산됩니다. 그런 다음 totalvaluelast을 사용하여 텍스트를 설정하십시오. 그러나 두 번째 이벤트가 시작되면 totalvaluefirst은 그대로 유지되며 텍스트는 변경되지 않습니다. 당신이 DOM 이벤트의 반복 처리로 이어질 안 전체 값을 변경하여 DOM을 수정하는 경우 :

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/ 내가 안전 장치 추가를 참조하십시오.

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> 

는 자바 스크립트를

을 :

이

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