Can't select "dynamically" created element by id
Hi all. I'm confused by some jquery behavior. I've scoured google for an explanation, but I don't get it. I'm creating some rows and cells in a table with javascript. I'm then trying to select these cells individually by id, but jquery can't seem to find them. It always returns length 0. The jquery code is, I believe, executing after the cell creation, so I would expect them to be in the DOM already. I can bind the click event to each cell by selecting the cell's class. Why can I select the class, but not the id? It would be nice to be able to do this rather than iterate through each cell in the class. Thanks!
Jim
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- function MakeNewTable() {
var tab = document.getElementById('tableSectors1');
var tbo = document.createElement('tbody');
var row, cell;
for (var i = 0; i < 2; i++) {
row = document.createElement('tr');
for (var j = 0; j < 2; j++) {
cell = document.createElement('td');
cell.setAttribute("class", "sectorMap1");
cell.setAttribute("id", "node_" + i + "," + j);
cell.appendChild(document.createTextNode('X'))
//$(cell).click(function () {
//$(this).html("***");
//});
row.appendChild(cell);
}
tbo.appendChild(row);
}
tab.appendChild(tbo);
}
function RewriteTable() {
- alert("rewritetable:");
$(".sectorMap1").each(function () {
alert($(this).attr("id"));
});
}
$(document).ready(function () {
- MakeNewTable();
$(".sectorMap1").click(function () {
alert(" $(this).attr(\"id\") = " + $(this).attr("id"));
alert("$(this).length = " + $(this).length);;
alert("$($(this).attr(\"id\")).length = " + $($(this).attr("id")).length);
//$($(this).attr("id")).html("***");
});
});
</script>
- <head>
<title></title>
</head>
<body>
<table style="width:100%;">
<tr>
<td>
<span id="clickSpan">click an X</span>
</td>
</tr>
<tr>
<td>
<table id="tableSectors1"></table>
</td>
</tr>
</table>
</body>
</html>