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:
- <html>
- <head>
- <script type="text/javascript" src="jquery.js"</script>
- <script type="text/javascript">
- $(document).ready(function(){
- var catId = 0,
- table = "",
- content = "",
- columnCount = 0;
-
- // Add key objective
- $("input:button.btnAddKeyObj").click(function(){
- catId = $(this).closest("div").attr("id");
- table = $("div#"+catId+" table");
- columnCount = $("div#"+catId+" table tr th").length;
-
- content = "<tr>";
- content += "<td rowspan=\"1\">" +
- "<div class=\"ko-description\">testContent</div>" +
- "<div class=\"ko-options\">" +
- "<a class=\"editKeyObj\" href=\"#\">Edit</a> | " +
- "<a class=\"removeKeyObj\" href=\"#\">Remove</a>" +
- "</div>" +
- "</td>";
- for(var i=0; i<columnCount-1; i++){
- content += "<td> </td>";
- }
- content += "</tr>";
- $(table).append($(content));
- });
- // Edit key objective
- $("a.editKeyObj").click(function(){
- alert("Open for ko-editing.");
- });
- // Remove key objective
- $("a.removeKeyObj").click(function(){
- alert("Open for ko-removal.");
- });
- });
- </script>
- </head>
- <body>
- <div class="goalsection" id="1">
- <table border="1">
- <tr>
- <th>Key Objective</th>
- <th>Key Result Area</th>
- <th>Measures</th>
- <th>Standards</th>
- <th>Weight (%)</th>
- </tr>
- </table>
- <p>
- <input type="button" class="btnAddKeyObj" value="Add Key Objective"/>
- <input type="button" class="btnAddKeyResultArea" value="Add Key Result Area"/>
- </p>
- </div>
- <div class="goalsection" id="2">
- <table border="1">
- <tr>
- <th>Key Objective</th>
- <th>Key Result Area</th>
- <th>Measures</th>
- <th>Standards</th>
- <th>Weight (%)</th>
- </tr>
- </table>
- <p>
- <input type="button" class="btnAddKeyObj" value="Add Key Objective"/>
- <input type="button" class="btnAddKeyResultArea" value="Add Key Result Area"/>
- </p>
- </div>
- </body>
- </html>