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! ;)

you should probably give the rows you add id attributes, so you can access them later when needed. Also you way of adding the rows lookos kind of complicated. Maybe worth looking into this thread: http://stackoverflow.com/questions/171027/add-table-row-in-jquery — tmaximini, Jan 26 '12 at 09:30

score 2 · Accepted Answer · answered Jan 26 '12 at 09:33

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.

That code does help shorten my mixture a little. Thanks! lol. Busy experimenting now with the suggestions above. I think i have coded myself into a dead end, so i need to take a few steps back and revise what i have. — Marthinus Elliott, Jan 26 '12 at 10:37

Accessing dynamically generated content in jquery

1 Answers1