Can't retrieve dynamically created element's .html() value in JQuery.

Question

I created a simple Import script that takes a CSV processes it in PHP and returns a HTML table (essentially a user list).

This is the HTML output:

<tr id="user:1">
  <td id="first:1">Jane</td>
  <td id="last:1">Doe</td>
</tr>

<tr id="user:2">
  <td id="first:2">John</td>
  <td id="last:2">Doe</td>
</tr>

This HTML data is initially returned as a response variable (data) of my upload function:

$.post('upload.php', {
  first: $('#first').val(),
  last: $('#last').val(),
  function(data) {
    $("#plist", top.document).html(data);
  }
);

You will notice that I then place the data into a div called "#plist" which resides in the top frame. Basically I'm doing the same kind of trickery gmail does when uploading attachments by using an iframe. Then I'm returning the data into a div on the top frame.

Everything works great.

My only problem is I'm unable to use JQuery's selectors on this dynamically created data. For instance If I wanted to retrieve the first users name I tried to do this:

var first = $("#first:1").html();
alert(first);

This does not work as I would expect it. I have used JQuery's live binding before and I have this contained within that logic and it still doesn't work.

$(".some_btn").live("click", function(){
  var first = $("#first:1").html();
  alert(first);
});

Any ideas?

Answer 1

The problem is that : is a special character as far as jQuery is concerned. It is used for various pseudo-elements (eg $("div:hidden").show()). You need to escape it:

$("#first\\:1")...

My suggestion would be to use a different character like _ or -.

Answer 2

You would still have to reference the other frame to get the element since that's where you inserted, like this:

$("#first", top.document).html();