Referencing a div (by id) that has been append()ed into the content

Question

I have a div I'm creating dynamically, with a unique id. I append() that to an area on the page.

Later, I try to reference that via $( '#id_here' ), but it returns nothing. Inspector in safari/chrome shows the existence and proper id of the element.

<script>
$( '#box' ).append( '<div><input id="id123" /></div>' );
//Later on in time...

function doingStuff(){
  alert( $( '#id123' ) );//undefined
}
</script>

<div id="box">

</div>

Answer 1

You're doing it right, it's just your alert statement that might be a bit off. Currently, your passing the jquery result to the alert(), which just reports "[object Objerct]" (in Chrome anyway. It'll differ for each browser).

Try:

alert($("#id123").val());

That would alert the value in the text box.

or

alert($("#id123")[0].id);

That would alert the id of the input (id123).

Perhaps you have an error elsewhere in your code? What you've posted works fine.

UPDATE

As others have pointed out (and I missed), your script is running before the div is appended to the document, hence the "undefined". Preventing your script from running by wrapping everything in:

$(document).ready(function()
{
    // Script here
});

is the way to go.

Answer 2

Make sure that you append the object not before the DOM is ready, otherwise you will probably not able to access #box yet.

$( document ).ready( function() 
{
    $( '#box' ).append( '<div><input id="id123" /></div>' );
} );

Answer 3

Tell jQuery to wait for the document to be ready before appending the div. This way, the document (and #box) is loaded and ready to be used before jQuery starts with its work. You do this by doing:

$(document).ready(function() {
    $( '#box' ).append( '<div><input id="id123" /></div>' );
});

You can keep the rest of the code as it is

Answer 4

The best way I've used to get arround that type of problems is to use .live() from Jquery, which attaches a handler to the desired event to be used on existent elements or elements to be created later on (like .append())...

Ex.:

$('#box').append('<div><input id="id123" /></div>');

$('#id123').live('click', function() {
  // Your Desired Code for that ID
});

Read more about this at: Jquery .live()

Answer 5

Comments on my poorly hacked together and un-tested example were all fair.

Turns out my problem was a special character in my div id.

It's been a long day.