使用事件冒泡处理事件委托(可修改的留言板)

最新推荐文章于 2022-06-05 11:27:48 发布

qq_41839784

最新推荐文章于 2022-06-05 11:27:48 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/qq_41839784/article/details/89674412

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="one">
	
	</ul>
	<textarea name="" id="two" cols="30" rows="10"></textarea>
	<button id="btn">点击添加</button>
</body>
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">


		$(btn).click(function(){
			//获取文本框的内容
			var txt = $(two).val();
			//创建Li
			var li = $("<li class='kkk'></li>");
			//把li添加到ul之中
			$(one).append(li);
			//创建span标签
			var span = $("<span class='ks'></span>");
			//插入span标签
			li.append(span);
			//把文本框内容添加到li之中
			span.html(txt);
			//创建删除按钮
			var del = $("<button class='jkl'></button>");
			del.html("删除");
			li.append(del);
			del.click(function(){
				li.remove();
			});
			//创建修改按钮
			var xg = $("<button class='jjj'></button>");
			xg.html("修改");
			li.append(xg);	
				xg.click(function(event){
					var a = prompt("请输入要修改的值");
                    //求出当前事件源
					var target = $(event.target);
                    //根据当前事件源查找下标
					var index = $(".jjj").index(target);
                    //根据下标进行只是内容的替换
					span.eq(index).text(a);
			});
			$(two).val("");
		})
	</script>
</html>