当输入中的值更改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

您将ID加倍并在html()和val()之间混合，使用parseInt()从html获取interger，最好使用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>

Answer 2

在这种情况下，您必须使用on()方法。您可以像一样使用

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

我希望这对你有帮助。

Answer 3

在脚本标记中添加

$(document).ready(function(){
// jQuery methods go here... or all js and jquery code here 
});

jquery启动语法