jQuery change()方法不工作的输入值

Question

我试图使用jQuerychange()方法获得#OrderTotalValue的总价值。当我在input上输入number时，它会自动计算和并更新到#OrderTotalValue上。

$(document).ready(function() {
$("input").on('change', function() {
var calculatedTotalSum = 0;
$("#EditTotals .col-md-9").each(function() {
var getPriceValue = $(this).val();
if ($.isNumeric(getPriceValue)) {
calculatedTotalSum += parseFloat(getPriceValue);
}
});
$("#OrderTotalValue").html(calculatedTotalSum);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="EditTotals">
<div class="form-group">
<div class="col-md-3">
<label asp-for="TaxRatesValue" />
</div>
<div class="col-md-9">
<editor asp-for="TaxRatesValue" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label asp-for="TaxValue" />
</div>
<div class="col-md-9">
<editor asp-for="TaxValue" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label asp-for="OrderTotalDiscountValue" />
</div>
<div class="col-md-9">
<editor asp-for="OrderTotalDiscountValue" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label asp-for="OrderTotalValue" />
</div>
<div class="col-md-9">
<editor asp-for="OrderTotalValue">
</div>
</div>
</div>

我尝试了不同的代码，如

$(document).ready(function() {
$("#EditTotals").change(function() {
var calculatedTotalSum = 0;
$(":input").each(function() {
calculatedTotalSum = calculatedTotalSum + parseInt($(this).val());
})
$("#OrderTotalValue").val(calculatedTotalSum);
});
});

Answer 1

您可以尝试为TaxRatesValue,TaxValue,OrderTotalDiscountValue添加一个类，或者它也会计算OrderTotalValue的值:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="EditTotals">
<div class="form-group">
<div class="col-md-3">
<label asp-for="TaxRatesValue" />
</div>
<div class="col-md-9">
<editor class="calculate" asp-for="TaxRatesValue" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label asp-for="TaxValue" />
</div>
<div class="col-md-9">
<editor class="calculate" asp-for="TaxValue" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label asp-for="OrderTotalDiscountValue" />
</div>
<div class="col-md-9">
<editor class="calculate" asp-for="OrderTotalDiscountValue" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label asp-for="OrderTotalValue" />
</div>
<div class="col-md-9">
<editor asp-for="OrderTotalValue">
</div>
</div>
</div>

js:

$(document).ready(function() {
$("input").on('change', function() {
var calculatedTotalSum = 0;
$(".calculate").each(function() {
var getPriceValue = $(this).val();
if ($.isNumeric(getPriceValue)) {
calculatedTotalSum += parseFloat(getPriceValue);
}
});
$("#OrderTotalValue").html(calculatedTotalSum);
});
});