jquery .on() function does not work.

jquery .on() function does not work.

I have 3 fields Quantity, Rate, Total Amount. If any one keyup quantity or rate fields then amount show on Total Amount field. I have also an add button. If anyone click on add button then new row and delete link create dynamically. My problem is If I keyup quantity or rate fields then calculateSum() function work properly. suppose I create 2 row it's total amount 100+(100+100)=300. If i delete first one nothing change. If i delete last one then result show 200. but correct result is 100.Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:


  1. <html>
  2.     <head>
  3.         <title>Invoice</title>
  4.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  5. <script type="text/javascript">
  6.       $(document).ready(function() {
  7. $(document).on("keyup",".qty, .rate",function(){
  8.         calculateSum();
  9.     });
  10. $(document).on("click",".del",function(){
  11.         calculateSum();
  12.     });
  13.       });
  14.      
  15. function calculateSum() {
  16.     var qty = [];
  17.     $(".qty").each(function() {
  18.             var num = parseFloat(this.value) || 1;
  19.             qty.push(num);
  20.     });
  21.     var rate = [];
  22.     $(".rate").each(function() {
  23.             var num = parseFloat(this.value) || 0;
  24.             rate.push(num);
  25.     });
  26.     var total = 0;
  27.     $('input[name="total_amount[]"]').each(function(i){
  28.         var amount = qty[i].toFixed(2)*rate[i].toFixed(2);
  29.         total += amount;
  30.         $(this).val(amount);
  31.     });
  32.     $("#sub_total").text(total);
  33. }
  34. </script>
  35. <script type="text/javascript" language='javascript'>
  36. /*
  37. This script is identical to the above JavaScript function.
  38. */
  39. var ct = 1;
  40. function new_link()
  41. {
  42.     ct++;
  43.     var div1 = document.createElement('div');
  44.     div1.id = ct;
  45.     // link to delete extended form elements
  46.     var delLink = '<div  style="text-align:right;margin-top:-20px"><a class="del" href="javascript:delIt('+ ct +')">Delete</a></div>';
  47.     div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;
  48.     document.getElementById('newlink').appendChild(div1);
  49. }
  50. // function to delete the newly added set of elements
  51. function delIt(eleId)
  52. {
  53.     d = document;
  54.     var ele = d.getElementById(eleId);
  55.     var parentEle = d.getElementById('newlink');
  56.     parentEle.removeChild(ele);
  57. }
  58. </script>
  59.         <style type="text/css">
  60. table
  61. {
  62.     border: 1px solid black;
  63.     width: 600px;
  64. }
  65. td
  66. {
  67.     border: 1px solid black;
  68.     padding:5px 5px 5px 5px;
  69. }
  70.         </style>
  71.     </head>
  72.     <body>
  73.         <div id="newlink">
  74.         <table cellpadding="0" cellspacing="0">
  75.             <tr>
  76.                 <td>Quantity</td>
  77.                 <td>Rate</td>
  78.                 <td>Total Amount</td>
  79.             </tr>
  80.              <tr>
  81.                  <td><input class='qty' type='text' name='qty[]'/></td>
  82.                 <td><input class='rate' type='text' name='rate[]'/></td>
  83.                <td><input class='total_amount' type='text' name='total_amount[]'/></td>
  84.             </tr>
  85.                  </table>
  86.     </div>
  87.         <div id="sub_total">0</div>
  88.         <input type="button" value="Add" onclick="new_link()"/>
  89.                 <div id="newlinktpl" style="display:none">
  90.         <table cellpadding="0" cellspacing="0">
  91.           <tr>
  92.                  <td><input class='qty' type='text' name='qty[]'/></td>
  93.                 <td><input class='rate' type='text' name='rate[]'/></td>
  94.                <td><input class='total_amount' type='text' name='total_amount[]'/></td>
  95.             </tr>
  96.                  </table>
  97.     </div>
  98.     </body>
  99. </html>