當輸入中的值已更改時，更改值的另一個字段jQuery

Question

我有一個表單（jconfirm內容的一部分）具有一個輸入字段。 用戶可以更改輸入值，並且根據余額更改后的值，需要根據updateOfflineAmount（）中的計算來更新脫機量。 現在，在更改了余額字段的輸入字段之后，不會更新離線金額。

$.confirm({
    title:'',
    content:'<form action="" class="formName">' +
        '<div class="form-group">' +
        '<div id="account_balance">account balance: $'+account_balance+'</div>' +
        '<div id="total_amount">total amount: $'+total_amount+'</div>' +
        '<div id="balance_amount">balance amount: <input type="number" id="balance_amount" name="balance_amount" value='+balance_amount+'></div>'+
        '<div id="offline_amount">offline amount: $'+offline_amount+'</div>' +
        '</div>' +
    '</form>'
});

function updateOfflineAmount(){
    var balance_amount_tmp=$('#balance_amount').val();
    offline_amount=total_amount-balance_amount_tmp;
    $("#offline_amount").val(offline_amount);
}

$('body').on('change','#balance_amount',function() {
    updateOfflineAmount();
});

Answer 1

在這種情況下，您必須使用on()方法。

$('body').on('change','#balance_amount', function() {
    updateOfflineAmount();
});

我希望這能幫到您。

Answer 2

在腳本標簽中添加

$(document).ready(function(){

   // jQuery methods go here... or all js and jquery code here 

});

jQuery起始語法

Answer 3

您將ID加倍並在html()和val()之間混合，使用parseInt()從html獲取整數，最好使用input事件

 var account_balance = 999, total_amount = 666, balance_amount = 0, offline_amount = 0, myForm = '<form action="" class="formName">' + '<div class="form-group">' + '<div id="account_balance">account balance: $<span id="total_amount">' + account_balance + '</span></div>' + '<div>total amount: $' + total_amount + '</div>' + '<div>balance amount: <input type="number" id="balance_amount" name="balance_amount" value=' + balance_amount + '></div>' + '<div>offline amount: $<span id="offline_amount">' + offline_amount + '</span></div>' + '</div>' + '</form>' $('body').html(myForm); function updateOfflineAmount() { var balance_amount_tmp = $('#balance_amount').val(), total_amount = parseInt($('#total_amount').html()); $('#balance_amount').val(balance_amount_tmp); offline_amount = total_amount - balance_amount_tmp; $("#offline_amount").html(offline_amount); } $('#balance_amount').on('input', function() { updateOfflineAmount(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>