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?

colon normally has a special meaning in a selector. try using id names that do not have a colon. — jdigital
– jdigital, Commented Feb 24, 2010 at 23:16
If something answers your question, it's strongly encouraged to accept an answer and/or upvote answers. — cletus
– cletus, Commented Feb 25, 2010 at 4:06

cletus · Accepted Answer · 2010-02-24 23:14:31Z

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

answered Feb 24, 2010 at 23:14

cletus

627k169 gold badges922 silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nick Craver · Accepted Answer · 2010-02-24 23:15:17Z

0

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

answered Feb 24, 2010 at 23:15

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related