动态添加点击事件

最新推荐文章于 2023-06-21 13:26:33 发布

CuteLulu_

最新推荐文章于 2023-06-21 13:26:33 发布

阅读量210

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/CuteLulu_/article/details/113308912

版权

jquery

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

动态添加点击事件

需求
- 代码
- - 效果

需求

点击添加按钮时，在后面追加一个div，里面也有添加和删除事件

（前端小白一枚，如果有更好的写法，希望各位大佬指出）

代码

div{
	width:400px;
		height:200px;
		background-color:#F6F6F6;
		margin:10px auto;
	}
p{
	font-size: 30px;
	text-align: center;
	line-height: 100px;
 }
a{
	display: inline-block;
	/* width:80px; */
	margin-left:20px;
	padding:5px 10px;
	border:1px solid #000;
	background-color: #fff;
	text-decoration: none;
	color: #333;
 }
<body>
	<div>
		<p>内容</p>
		<a onclick="agains()" href="javascript:;">继续添加 +</a>
	</div>
</body>

<script>
		function agains(){
			var num = $('div').length;
			var index = 1;
			for(var i = 0;i < index; i++){
				var m = num - 1;
				$('div').eq(m).after(`<div><p>内容`+m+`</p><a οnclick="agains()" href="javascript:;">继续添加 +</a><a class="remove" href="javascript:;">删除 -</a></div>`)
			}
			$('.remove').click(function(){
				$(this).parent().remove();
			})
		}
	</script>