jQuery img add doesn't show

I have the following jQuery code:

$('#foo').click(function ()  {
    var loading = $('<img id="loading" src="images/loader.gif" alt="loading" />');
    $('#stars').prepend(loading);
    alert('WAIT');
});

$('#bar').click(function ()  {
     $('#stars').empty();
});

When first clicking #foo the image is being shown in my browser window. After clicking #bar and then #foo again the image is not being shown.

I use Chrome and also use the Inspect Element tool and I can see in the code that the img tag was added in #stars when clicking for the second time #foo. But no img is being shown in the browser window.

Any ideas why? Should I use the live() function perhaps, 开发者_Python百科but how?

it seems to work fine, take a look: http://jsfiddle.net/84Nj3/1/

Maybe there is something different in your code that causes the problem.

This seems to work fine for me.

See a demo I put together here: http://jsfiddle.net/uWfW7/1/

I'm unable to test this in Chrome right now but it's working for me in FF5. Alternatively, instead of re-creating the image object every time you could simply show/hide the image as reqired.

HTML

<div id="image"><img src="[...] alt="text"></div>

CSS

#image{display:none;}

JS

$('#foo').click(function(){$('#image').show()})
$('#bar').click(function(){$('#image').hide()})

Demo here: http://jsfiddle.net/t5QJg/