別の要素が更新された後に更新する

Question

私は、1つの要素（ '.item - itemprice'）が触れたくない別の機能を使ってテキストを更新するページを作成しています。私がしたいのは、テキストが最初の要素と一致するように別の要素（ '.header - itemprice'）を更新することです。

残念ながら、以下のハンドラは更新機能よりも高速に動作しているようです。結果として、ヘッダーは前のテキストのままか空白の文字列に変更されます。最初の要素の更新が終了するまで、最後の行を遅らせる方法はありますか？あなたがすべてで他の機能に触れたい、それはまた、選択の変更イベントに呼ばれていると仮定していない場合は

$(document).ready(function() { 
    $('#txtQuantity, .ProductGroupItemQuantity').blur(updatePrice); 
}); 

function updatePrice() { 
    var itemPriceEl = $('.item--itemprice'); 
    var itemCountEl = $('#txtQuantity'); 
    var groupUpdateEl = $('#lnkProductGroupUpdatePrice'); 
    var groupPriceEl = $('.pdetail--price-total'); 
    var totalPriceEl = $('.ProductDetailsPricing'); 
    var itemPrice = moneyToNumber(itemPriceEl.text()); 
    var itemCount = moneyToNumber(itemCountEl.val()); 
    var itemTotalPrice = itemCount * itemPrice; 
    var groupTotalPrice = 0; 

    // Trigger Group Update 
    groupUpdateEl.click(); 
    groupTotalPrice = moneyToNumber(groupPriceEl.text()); 

    // Calculate Total Price 
    totalPriceEl.text('Total: $' + Number(groupTotalPrice + itemTotalPrice)/100); 
} 

/*$('select').on('change', function() { 
    const headPrice = document.querySelector('.header--itemprice'); 
    const lowerPrice = document.querySelector('span.item--itemprice'); 
    const $lowerText = $(lowerPrice).text(); 
    $(headPrice).text($lowerText); 
});*/ 

function moneyToNumber(moneyEl) { 
    try { 
    return Number(moneyEl.replace(/[^0-9\.]+/g,"").replace(/\D/g,'')); 
    } catch (err) { 
    return 0; 
    } 
} 

Answer 1

：ここ

$('select').on('change', function() { 
    const headPrice = document.querySelector('.header--itemprice'); 
    const lowerPrice = document.querySelector('span.item--itemprice'); 
    const $lowerText = $(lowerPrice).text(); 
    $(headPrice).text($lowerText); 
}); 

は、既存の機能です。本当にハック方法は、このようなものかもしれない - その場合

$('select').on('change', function() { 
setTimeout (function() 
{ 
    const headPrice = document.querySelector('.header--itemprice'); 
    const lowerPrice = document.querySelector('span.item--itemprice'); 
    const $lowerText = $(lowerPrice).text(); 
    $(headPrice).text($lowerText); 
}, 0); 
}); 

Answer 2

より良い方法は、関数を変更している、あなたも他の機能を起動する機能が実行されるイベントをトリガし、このイベントを見ることができます要素（ '.header - itemprice'）を変更する