jQuery not adding dynamic added table row
This is my first time with jQuery/JS and rows in my table that are pre-populated within code are adding up and working as expected. Any dynamic rows do not seem to hit the function.
$(document).on('click', '#btn_Add', function() {
var ProductText = $('#Product option:selected').text();
var ProductSell = $('#Product option:selected').val();
var ProductExtra = $('#Product option:selected').data('extra-data');
var tr = $('<tr>');
tr.append($('<td><input type="text" class="pnm" value="Product One" name="pnm" readonly=""></td>'));
tr.append($('<td><input type="text" class="qty" value="5" name="qty"></td>'));
tr.append($('<td><input type="text" class="price" value="220" name="price" readonly=""></td>'));
tr.append($('<td><input type="text" class="subtot" value="0" name="subtot" readonly=""></td>'));
tr.append($('<td><input type="submit" value="Remove" id="btn_Remove" /></td>'));
$('table tbody').append(tr);
//$('#Product').val('');
});
$(document).on('click', '#btn_Remove', function() {
var currentTr = $(this).closest('tr');
currentTr.remove();
});
$(function() {
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
var $tblrows = $("#tblProducts tbody tr");
$tblrows.each(function(index) {
var $tblrow = $(this);
$tblrow.find('.qty').on('change', function() {
var qty = $tblrow.find("[name=qty]").val();
var price = $tblrow.find("[name=price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$tblrow.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
$(".subtot").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('.grdtot').val(grandTotal.toFixed(2));
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="container">
<h2>Performing Calculations in a Table</h2>
<div class="row">
<div class="col-12">
<div class="d-flex">
<select style="display: inline" id='Product'>
<option value="15">New Product</option>
<option value="30">Sample</option>
</select>
<input type="submit" value="Add" id="btn_Add" />
</div>
</div>
</div>
<div class="row">
<div class="col">
<table class="table" id="tblProducts">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" readonly=""></td>
<td><input type="text" class="qty" value="" name="qty"></td>
<td><input type="text" class="price" value="220" name="price" readonly=""></td>
<td><input type="text" class="subtot" value="0" name="subtot" readonly=""></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" readonly=""></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>https://jsfiddle.net/usL5ectk/1/
How can i debug the JS to see whats happening.
from Recent Questions - Stack Overflow https://ift.tt/3qtkcMM
https://ift.tt/eA8V8J
Comments
Post a Comment