jQuery code doesn't work on dynamically appended elements - html

Question

my jquery code doesn't work on dynamically appended elements. It is working fine for the elements that already present there but When I embed a new row using the jQuery append function, then the jquery code no longer works.
Here is the jquery code that embeds a new row
<script>
$(document).ready(function() {
$('#add_row').click(function(){
$('#sale_table').append('<tr><td><select class="form-control" name="item_name[]"><option>Select an Item</option><?php while($item_result = mysqli_fetch_assoc($select_item_query)) { ?><option><?php echo $item_result['item_name']; ?></option><?php } ?></select></td><td><input type="text" class="form-control" name="item_quantity[]" id="sale_item_quantity" placeholder="0.00"></td><td><input type="text" class="form-control" name="item_price[]" id="sale_item_price" placeholder="0.00"></td><td><input type="text" class="form-control" name="item_discount[]" id="sale_item_discount" placeholder="%"></td><td><input type="text" class="form-control" name="item_total_amount[]" id="sale_item_total_amount" placeholder="0.00"></td></tr>');
});
});
</script>
and this is the jquery code that I'm trying to run on appended row. This code doesn't work on appended rows
<script>
$(document).ready(function() {
$('#sale_item_price, #sale_item_quantity').on('keyup', function(){
var sum = 0;
$('.sale-entry > tbody > tr').each(function() {
var qty = $(this).find('#sale_item_quantity').val();
var price = $(this).find('#sale_item_price').val();
var discount = $(this).find('#sale_item_discount').val();
var amount = (qty * price);
if(discount){
amount = amount - discount;
}
$(this).find('#sale_item_total_amount').val(amount);
sum += amount;
});
$('#sale_subtotal_amount').text(sum);
$('#sale_total_amount').text(sum);
$("#sale_item_discount").on('keyup', function() {
var discount = $("#sale_item_discount").val();
$("#sale_item_total_amount").val(sum - discount);
$("#sale_subtotal_amount").text(sum - discount);
$("#sale_total_amount").text(sum - discount);
});
});
});
</script>
and here is the HTML code
<table class="table sale-entry" id="sale_table">
<thead class="thead-light">
<tr>
<th scope="col">Item Name</th>
<th scope="col">Quantity</th>
<th scope="col">Rate</th>
<th scope="col">Discount</th>
<th scope="col">Total Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><select class="form-control" name="item_name[]">
<option>Select an Item</option>
<?php while($item_result = mysqli_fetch_assoc($select_item_query)) { ?>
<option><?php echo $item_result['item_name']; ?></option>
<?php } ?>
</select>
</td>
<td><input type="text" class="form-control" name="item_quantity[]" id="sale_item_quantity" placeholder="0.00"></td>
<td><input type="text" class="form-control" name="item_price[]" id="sale_item_price" placeholder="0.00"></td>
<td><input type="text" class="form-control" name="item_discount[]" id="sale_item_discount" placeholder="%"></td>
<td><input type="text" class="form-control" name="item_total_amount[]" id="sale_item_total_amount" placeholder="0.00"></td>
</tr>
</tbody>
</table>
What could be the issue?

Answer 1

if $('#sale_item_price, #sale_item_quantity').on('keyup'... not working then $(document).on('keyup', '#sale_item_price, #sale_item_quantity',... works.
Here, $('#sale_item_price, #sale_item_quantity') is unaware of DOM changed.
Have a look in example:-
$(document).ready(function() {
$(document).on('keyup', '#sale_item_price, #sale_item_quantity, #sale_item_discount', function() {
var sum = 0;
$('.sale-entry > tbody > tr').each(function() {
var qty = $(this).find('#sale_item_quantity').val();
var price = $(this).find('#sale_item_price').val();
var discount = $(this).find('#sale_item_discount').val();
var amount = (qty * price);
if (discount) {
amount = amount - discount;
}
$(this).find('#sale_item_total_amount').val(amount);
sum += amount;
});
$('#sale_subtotal_amount').text(sum);
$('#sale_total_amount').text(sum);
});
});
$(document).ready(function() {
$('#add_row').click(function() {
$('#sale_table').append('<tr><td><select class="form-control" name="item_name[]"><option>Select an Item</option></select></td><td><input type="text" class="form-control" name="item_quantity[]" id="sale_item_quantity" placeholder="0.00"></td><td><input type="text" class="form-control" name="item_price[]" id="sale_item_price" placeholder="0.00"></td><td><input type="text" class="form-control" name="item_discount[]" id="sale_item_discount" placeholder="%"></td><td><input type="text" class="form-control" name="item_total_amount[]" id="sale_item_total_amount" placeholder="0.00"></td></tr>');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table sale-entry" id="sale_table">
<thead class="thead-light">
<tr>
<th scope="col">Item Name</th>
<th scope="col">Quantity</th>
<th scope="col">Rate</th>
<th scope="col">Discount</th>
<th scope="col">Total Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control" name="item_name[]">
<option>Select an Item</option>
</select>
</td>
<td><input type="text" class="form-control" name="item_quantity[]" id="sale_item_quantity" placeholder="0.00"></td>
<td><input type="text" class="form-control" name="item_price[]" id="sale_item_price" placeholder="0.00"></td>
<td><input type="text" class="form-control" name="item_discount[]" id="sale_item_discount" placeholder="%"></td>
<td><input type="text" class="form-control" name="item_total_amount[]" id="sale_item_total_amount" placeholder="0.00"></td>
</tr>
</tbody>
</table>
<button id="add_row" type="button">Add row</button>
<div>sale_subtotal_amount: <span id="sale_subtotal_amount"></span></div>
<div>sale_total_amount: <span id="sale_total_amount"></span></div>