jQuery img add 不显示

Question

我有以下 jQuery 代码：

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

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

当第一次单击#foo 时，图像会显示在我的浏览器窗口中。再次单击#bar 和#foo 后，图像未显示。

我使用 Chrome 并且还使用了Inspect Element 工具，我可以在代码中看到#stars 在第二次点击#foo 时添加了img 标签。但是浏览器窗口中没有显示img。

任何想法为什么？也许我应该使用live() 函数，但是如何？

Answer 1

它似乎工作正常，看看：http://jsfiddle.net/84Nj3/1/

您的代码中可能有一些不同的东西导致了问题。

Answer 2

这对我来说似乎很好。

查看我在这里整理的演示：http://jsfiddle.net/uWfW7/1/

我现在无法在 Chrome 中对此进行测试，但它在 FF5 中对我有用。或者，您不必每次都重新创建图像对象，而是根据需要简单地显示/隐藏图像。

HTML

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

CSS

#image{display:none;}

JS

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

在这里演示：http://jsfiddle.net/t5QJg/