动态添加图片并绑定删除事件

最新推荐文章于 2023-04-28 10:45:03 发布

f7anty

最新推荐文章于 2023-04-28 10:45:03 发布

阅读量1.7k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用jQuery实现动态添加图片到页面，并为每个图片绑定删除事件的方法。通过点击按钮可以添加带有删除链接的新图片，点击删除链接则会弹窗显示图片序号和源地址并淡出移除该图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加图片并绑定删除事件</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script></head>
<body>
<div id="container">
<div class="image" >
   <img src="http://attimg.dospy.com/img/day_141110/20141110_13cd5c2f6e4fd64594a8zSsBJubClOFD.jpg" id="img1"  >
   <a href="#" class="delete">Delete</a>
 </div>
 <div class="image" >
   <img src="http://tupian.enterdesk.com/2014/mxy/02/22/3/2.jpg" id="img2" >
   <a href="#" class="delete">Delete</a>
   </div>
 </div>
<input type="button" id="add" value="添加图片">
<div id="uploadImg"></div>
<style>
#container { overflow:auto; }
.image { float:left;position:relative; margin:10px}
.image img{width:200px;height:160px}
a.delete { display:none;position:absolute;top:0;right:0;width:10px;height:10px;text-indent:-999px;background:red; }
.image:hover a.delete { display:block; }
</style>

<script>
$(document).ready(function(){
$("#add").click(function(){
$("#uploadImg").append("<div class='image' id='uploadImg' ><img src='http://tupian.enterdesk.com/2014/mxy/02/22/3/2.jpg' ><a href='#' class='delete'>Delete</a></div>")  
});
  								
$('body').on('click','a.delete',function(e){
	var index=$("a.delete").index(this);
	image = $(this).closest('.image').find('img');
	alert('第 '+index+" 张图；地址: "+image.attr("src")+'"');
	$(this).closest('.image').fadeTo(300,0,function(){
		$(this).animate({width:0},200,function(){
		$(this).remove();
		});
	});
 });
});
</script>
</body>
</html>