Can't select "dynamically" created element by id

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
 

  1. <!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">


  2.     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  3.     <script type="text/javascript">
  4.         function MakeNewTable() {

  5.             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);
            }



















  6.         function RewriteTable() {
  7.             alert("rewritetable:");
                $(".sectorMap1").each(function () {
                    alert($(this).attr("id"));
                });  



  8.         }

  9.         $(document).ready(function () {
  10.             MakeNewTable();

  11.             $(".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>








  12. <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>