How can I use a “rel” attribute on a javascript generated table?

Question

Okay, so it's kind of difficult for me to phrase this question, so I'll describe the problem as best I can. I'm converting this code that brought up a preferences overlay from clicking on an image into one that opens an overlay from clicking on one of the many table rows.

The code involves these two files (they are not the only files in the project, however.)

index.html

    <div class="details">
        <h3 align="center">Preferences</h3>



    </div>
</div>
        <script>
             /* Overlay  */
             $(document).ready(function() {

             $("tr[rel]").overlay(); 

            });
        </script>

        <!-- <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> -->
        <script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
        <script src="js/jquery.qtip.debug.js" type="text/javascript"></script>
        <script>
             /* TOOL TIPS */
        /*   $(document).ready(function() {
                    $(#'milehf').qtip({
                       content: '100%',
                       style: { 
                          width: 200,
                          padding: 5,
                          background: '#A2D959',
                          color: 'black',
                          textAlign: 'center',
                          border: {
                             width: 7,
                             radius: 5,
                             color: '#A2D959'
                          },
                          tip: 'bottomLeft',
                          name: 'dark' // Inherit the rest of the attributes from the preset dark style
                       }
                    });
             });*/
        </script>

table.js

$.ajax({
    async:false,
    dataType: "json",
    url: "http://localhost:8080/JSP/connection2.jsp",
    success: function(data){
        cbspData = data;
        console.log(cbspData[1].Satellite);
        }
    });

function table4()
{
    console.log(cbspData[1].Satellite);
    //alert(data2[1].id);
    var thisDat = cbspData;

    if (!document.getElementsByTagName) return;
    tabBody=document.getElementById("mytable")
    //tabBody=document.getElementsByTagName("TBODY").item(0);

    //var Parent = tabBody.getElementsByTagName("TBODY");
    while(tabBody.hasChildNodes())
    {
       tabBody.removeChild(tabBody.firstChild);
    } 

  $.each(cbspData, function(i,dat){ 
    row=document.createElement("TR");
    row.setAttribute("number", dat.id);
    row.id = "triggers";
    row.rel="#mies1";
    console.log(row.id);
    console.log(row.rel);
    //console.log(dat.Satellite);


    document.createAttribute();

    cell0 = document.createElement("TD");
    cell0.innerHTML = dat.Mission;
    //onMouseOver='alert(\"hello\"); document.getElementById(\"div" + i + "\").style.visibility = \"visible\";'
    cell1 = document.createElement("TD");
    cell1.innerHTML = dat.Satellite;
    //$("#test-area table tbody tr:eq(" + i +") td:eq(0)").html(
    //  dat.id
    //);
    cell2 = document.createElement("TD");
    cell2.innerHTML = dat.TerminalID;
   // $("#test-area table tbody tr:eq(" + i +") td:eq(1)").html(
   //   dat.title
    //);
    cell3 = document.createElement("TD");
    cell3.innerHTML = dat.Modem;
    //$("#test-area table tbody tr:eq(" + i +") td:eq(2)").html(
    //  dat.subtitle
    //);
    cell4 = document.createElement("TD");
    cell4.innerHTML = dat.Teleport;
    //$("#test-area table tbody tr:eq(" + i +") td:eq(3)").html(
    //  dat.ranges
    //);
    cell5 = document.createElement("TD");
    cell5.innerHTML = dat.ModemLock;

    //textnode5=document.createTextNode(dat.measures);
    //cell5.appendChild(textnode5);

    row.appendChild(cell0);
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    row.appendChild(cell5);
    tabBody.appendChild(row);
  });

}

Table.js generates a table from information generated by a JSP, even though the rel attribute is successfully set to "#mies1" clicking doesn't work. However, if I set the rel of a table made of plain html in index.html it works just fine. I think this has something to do with the page finishing its load cycle and running the overlay code before the table is fully generated. Could this have anything to do with it? How can I make the generated TR's clickable?

Answer 1

Call $("tr[rel]").overlay(); at the end of function table4() .