解决append的div的事件失效问题

快来打我* 2022-05-17 11:36 267阅读 0赞

原来div里有一个关闭按钮，点击后可以把该div删除掉。

现在新增一个按钮，点击这个按钮就可以动态添加和原来的div相同的div。

实现点击新添加的div里的按钮，也想要实现删除该按钮所在的div。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>测试</title>
    		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div class="old">
    			<button class='newbtn'>按钮1</button>
    		</div>
    		<div class="old">
    			<button class='newbtn'>按钮2</button>
    		</div>
    		
    		<button id="adddiv">添加div</button>
    		<button id="btn">清空div</button>
    		<script type="text/javascript">
    			//点击清空的时候删除所有div
    			$("#btn").click(function(){
    				$("div").remove();
    			})
    			//点击添加的时候增添div
    			$("#adddiv").click(function(){
    				var newdiv = "<div class='old'><button class='newbtn'>新的按钮</button></div>";
    				$("body").append(newdiv);
    			})
    			//点击按钮则删除按钮所在的div
    			$(".newbtn").click(function(){
    				$(this).parent().remove();
    			})
    		</script>
    	</body>
    </html>

根据预想写出了如上代码，然而测试的时候才发现，看似完美的代码，根本不能实现预期效果。

解决方案：把倒数第九行改为：

var newdiv = "<div class='old'><button class='newbtn' onclick='$(this).parent().remove()'>新的按钮</button></div>";

于是效果就出来了。这是躺过坑的小伙伴告诉我的方法，虽然问题解决了，但是我还是不明白自己的代码为什么没有达到预期效果，希望大家帮忙看看，欢迎指点！