Accessing dynamically generated content in jquery

Question

I've just recently learned how jquery can access dynamically generated content, by placing a "bubble" around its parent object (or first available parent that is not dynamic), and then telling it how to handle an event from within it etc.

I have a table (static) and rows are dynamically added.

<table class="aBorder_ClearBlack" width="100%" id="tblEveryone">
  <tr class="TableHeading_Dark_Small">
    <td>Current User Calls</td>
    <td><span id="theRefresh" style="cursor:pointer">
        <img ... onclick="javascript:clicky()"...></span>
    </td>
 </tr>

and the code that adds the rows:

function clicky() {
    var table = document.getElementById("tblEveryone");
    var tmpRowCount = table.rows.length;

    //clear existing rows first (else it just appends)
    for (var x = 2; x < tmpRowCount; x++) {
        table.deleteRow(x);
        tmpRowCount--;
        x--;          
    }

    jQuery.each(users, function (index, user) {
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        row.style.display = "none"; <--------  
        row.setAttribute('class', 'BeforeHover_Clean');    

        var cell1 = row.insertCell(0);
        cell1.innerHTML = users[index].Name;

        var cell2 = row.insertCell(1);
        cell2.innerHTML = users[index].Calls;
    });

    $(".BeforeHover_Clean").show(); <-----
}

then the code i use to "bind" click events on each row

$(document).ready(function () {
  $('#tblEveryone').delegate(".BeforeHover_Clean", "click", function () {
    var whatClicked = this.innerHTML.toLowerCase().split("</td>")[0].split("<td>")[1];
    document.getElementById("aIframe").src = "Calls.aspx?aUser=" + whatClicked;
   });
});

The thing is (line marked with <---- above, second block), row.style.display, correctly starts off the items with none as visibility, but the last line, $(".BeforeHover_Clean").show(); obviously wont work as the content is dynamic. Is there a way to manipulate the delegate, or some other jquery feature, to set the items visible again when needed?

I am clueless at this level. Binding "click" events to the parent is as good as i got! lol. I feel like charles babbage now! ;)

Answer 1

The fact that it is dynamic shouldn't matter.

You hae a rather strange mix of jQuery and DOM JavaScript whjich probably isn't helping, and is also bloating your code substantially.

For example, your each loop can be condensed as follows:

jQuery.each(users, function (index, user) {
    var $newRow = $("<tr class='BeforeHover_Clean'><td>" + users[index].Name+ "</td><td>" + users[index].Calls + "</td></tr>").hide();
    $("#tblEveryone").find('tbody').append($newRow);
});

Try using the ID selector $("#myid"); instead of document.getElementById(); and also playing around with some of the jQuery DOM manipulation methods, append(), prepend(), insertAfter(), etc.

Not a specific answer to your question, but hopefully some helpful guidelines.