javascript - 单击时添加图像 - 仅添加一次然后停止

Question

$('button').click(function() {   
 $('.img-container').prepend('<img src="images/image.jpg">')
});

我有一个单页设计和一个点击后可见的图库部分。我通过预先添加 imgs 来做到这一点。在这里您可以看到我如何添加 1 张图片。问题是您点击的次数越多，它创建的元素就越多。

有什么方法可以让它只创建一次元素吗？然后以某种方式停止前置。

Answer 1

如果您的处理程序与给定的一样简单，那么您可以使用 .one()注册处理程序，以便事件处理程序仅执行一次

$('button').one('click', function() {   
 $('.img-container').prepend('<img src="images/image.jpg">')
});

演示:Fiddle

<小时/>

另一个选项是检查图像是否存在

$('.img-container').not(':has(.someimage)').prepend('<img class="someimage" src="images/image.jpg">')

演示:Fiddle