Question

Via ajax i retrieve some json data, make it as html and append it to my page.
Here I have a problem. I cant access element by id, if id is variable.

For example, http://jsfiddle.net/f8g5e/1/

<div id="123">Hello</div>
<div id="321">Bye</div>
<div id="out"></div>

$(function(){
   key = '123';
   $('#' + key).hide();
   $('#321').hide();
});

The simples thing is works! #123 and #321 elements are hidden. Yeah, it’s pretty obviosly.

But, in my project, when I append data to page:

$('#123') //returns element
$('#' + key) //returns null

Some code:

// generating data
var htmlData = '<div id="123">Greetings!</div><div id="321">Bye bye</div>';

// appending data   
$('#tweets').empty();
$('#tweets').append(htmlData);

What are the possible causes i can’t access elements?
Thanks.

UPDATE
Dont know how it works in JSFiddle, but when I changed my IDs to properly names it began to work now. Thanks to all! Next time, I’ll take more attention to w3c dom standarts 😉 Happy New Year!

Answer 1

The only reason I can think of that $('#'+key) wouldn’t work is because the variable key is undefined.

Note: you’re not supposed to start an ID with a number according to the W3C spec. However, most browsers allow it, so I doubt this is causing your problem.

However, if you have two divs with the same ID attribute, then JavaScript will only select the first one it finds — IDs are supposed to be unique. If this is happening, use classes instead.