I am very new to jQuery, and am having trouble accessing elements of dynamic content. As you can see below, I have created a basic table contained within a div
which is already present when you run the code. when you click on any cell, an alert prompt displays the text of that cell. However, if I create the table after the page has loaded (clicking on the button) and then click on the cells, I cant get the same result.
<script>
$(document).ready(function() {
$("#div1 td").click(function() {
alert($(this).text());
})
$("#div2 td").click(function() {
alert($(this).text());
})
$("#createtable").click(function () {
$("#div2").html("<table id=\"table2\" border=\"1\"><tr><th>Table</th><th>2</th></tr><tr><td>January</td><td>$100</td></tr></table>");
})
});
</script>
<div id="div1">
<table id="table1" border="1">
<tr>
<th>Table</th>
<th>1</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</div>
<br>
<button id="createtable">Generate Table</button>
<div id="div2">DYNAMIC CONTENT</div>
.