单击前面的图像 - 前置一次然后停止

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