JQuery selector does not see elements created on-the-fly

JQuery selector does not see elements created on-the-fly

I have an element generator using jquery, However, elements generated were not affected by the event (click) even though they match tag and class name. Anyone can give me an idea why?

Code:
  1. <html>
  2. <head>
  3.     <script type="text/javascript" src="jquery.js"</script>
  4.     <script type="text/javascript">
  5.         $(document).ready(function(){
  6.             var catId = 0,
  7.                 table = "",
  8.                 content = "",
  9.                 columnCount = 0;
  10.            
  11.             // Add key objective
  12.             $("input:button.btnAddKeyObj").click(function(){
  13.                 catId = $(this).closest("div").attr("id");
  14.                 table = $("div#"+catId+" table");
  15.                 columnCount = $("div#"+catId+" table tr th").length;
  16.                
  17.                 content = "<tr>";
  18.                 content += "<td rowspan=\"1\">" +
  19.                            "<div class=\"ko-description\">testContent</div>" +
  20.                            "<div class=\"ko-options\">" +
  21.                                    "<a class=\"editKeyObj\" href=\"#\">Edit</a> | " +
  22.                                    "<a class=\"removeKeyObj\" href=\"#\">Remove</a>" +
  23.                            "</div>" +
  24.                            "</td>";
  25.                 for(var i=0; i<columnCount-1; i++){
  26.                     content += "<td>&nbsp;</td>";
  27.                 }
  28.                 content += "</tr>";
  29.                 $(table).append($(content));
  30.             });
  31.             // Edit key objective
  32.             $("a.editKeyObj").click(function(){
  33.                 alert("Open for ko-editing.");
  34.             });
  35.             // Remove key objective
  36.             $("a.removeKeyObj").click(function(){
  37.                 alert("Open for ko-removal.");
  38.             });
  39.         });
  40.     </script>
  41. </head>
  42. <body>
  43. <div class="goalsection" id="1">
  44.     <table border="1">
  45.         <tr>
  46.             <th>Key Objective</th>
  47.             <th>Key Result Area</th>
  48.             <th>Measures</th>
  49.             <th>Standards</th>
  50.             <th>Weight (%)</th>
  51.         </tr>
  52.     </table>
  53.     <p>
  54.         <input type="button" class="btnAddKeyObj" value="Add Key Objective"/>
  55.         <input type="button" class="btnAddKeyResultArea" value="Add Key Result Area"/>
  56.     </p>
  57. </div>
  58. <div class="goalsection" id="2">
  59.     <table border="1">
  60.         <tr>
  61.             <th>Key Objective</th>
  62.             <th>Key Result Area</th>
  63.             <th>Measures</th>
  64.             <th>Standards</th>
  65.             <th>Weight (%)</th>
  66.         </tr>
  67.     </table>
  68.     <p>
  69.         <input type="button" class="btnAddKeyObj" value="Add Key Objective"/>
  70.         <input type="button" class="btnAddKeyResultArea" value="Add Key Result Area"/>
  71.     </p>
  72. </div>
  73. </body>
  74. </html>