Don't need any of the keyup, you can use the amt to delegate the handling to any of those.
Basically, remove this handling:
$('.amt').each(function() {
$(this).keyup(function() {
calculateSum();
});
});
$('.amt' + j).each(function() {
$(this).keyup(function() {
calculateSum();
});
j++;
});
Replace with:
// Use a change event delegate on amt
$('#tab_logic').on('change', '.amt', function() {
calculateSum();
});
Try the runnable example below.
Click the spinner buttons, the sum change is immediate. If a value is typed in, the sum updates after the field loses focus.
<?php
$sno = 1;
?>
<html>
<head>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color: #174C68;
}
.amt {
background-color: #FEFFB0;
//font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th />
<th>Invoice No.</th>
<th>Invoice Date</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<?php echo $sno;?>
</td>
<td width="40px"><input class="txt" type="text" name="invoiceNo" style="text-transform:uppercase" /></td>
<td><input type="date" name="date" /></td>
<td><input class="txt" type="text" name="txt" /></td>
<td><input class="amt" type="number" name="amt" min="0" step="0.01" /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<button id="add_row" class="btn btn-primary btn-lg pull-left">Add Row</button>
<table>
<tr id="summation">
<td align="right" colspan="3">Total Sum :</td>
<td align="right" colspan="2"><span id="sum">0</span></td>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
var i = 1;
var j = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td>" + (i + 1) + "</td><td><input type='text' name='invoiceNo" + i + "' class='form-control input-md' style='text-transform:uppercase'/></td><td><input type='date' name='date" + i + "' class='form-control input-md'/></td><td><input type='text' name='text" + i + "' class='form-control input-md'/></td><td><input type='number' name='amt" + i + "' class='amt' min='0' step='0.01'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
// Use an event delegate on amt
$('#tab_logic').on('change', '.amt', function() {
calculateSum();
});
function calculateSum() {
var sum = 0;
$(".amt").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum.toFixed(2));
}
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
