jQuery Forum

I am building a custom shirt design app which uses an Ajax form to allow a user to upload an image, and once it is uploaded it is automatically placed in the next empty <li> in their little gallery... once it is in the gallery they can click on it and insert it into their shirt design. It's all done with Ajax so they never leave the page.

Here's the code that inserts the image into the page once it is uploaded: (this works perfect)

1. $('#last').html('<img src="uploads/' + filename + '" />');

Once the image is in their gallery, the user can click on it which inserts it into their t-shirt design:

1. var selected = $(this).attr('src');
2. $("#container").html('<img src="' + selected + '" width="40" />');

Okay so say their gallery already has 5 images in it an they upload a 6th, the HTML looks like this on page load:

1. <li class="graphic"><img src="uploads/monkey.png'"></li>
2. <li class="graphic"><img src="uploads/ltdtee.png'"></li>
3. <li class="graphic"><img src="uploads/wordpress.png'"></li>
4. <li class="graphic"><img src="uploads/kitty.jpg'"></li>
5. <li class="graphic"><img src="uploads/steve.png'"></li>
6. <li class="graphic" id="last"></li>

The problem is that if I click on one of the first five, it works, the image gets inserted into the shirt design. But if I click on that last one, which now has the image I uploaded in it, it doesn't get inserted into the shirt design. Is there a reason why?