Event binding on dynamically created elements

by Naresh

HTML

<input type="button" value="ADD" id="add">
<div id="rows">
  <div class="row">
    <input type="number" class="qty">
    <input type="number" class="rate">
    <input type="number" class="amount" readonly>
  </div>
</div>

JavaScript

$('#add').click(function() {
	var new_row = '<div class="row">' +
    '<input type="number" class="qty">' +
    '<input type="number" class="rate">' + 
    '<input type="number" class="amount" readonly>' +
  '</div>';
	$('#rows').append(new_row);
});

$('#rows').on('keyup', '.row', function() {
	var qty = $(this).find('.qty').val();
  var rate = $(this).find('.rate').val();
  $(this).find('.amount').val( (parseFloat(qty) * parseFloat(rate)).toFixed(2));
});