动态添加元素没有事件

最新推荐文章于 2025-04-23 11:38:43 发布

qq_33239420

最新推荐文章于 2025-04-23 11:38:43 发布

阅读量247

点赞数

本文链接：https://blog.youkuaiyun.com/qq_33239420/article/details/106314995

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
	<script>
		$(function(){
			function bb(){
				console.log(88888)
			}
			$('body').on('click','.submit',function(){
				bb()
			})
		})
	</script>
</head>
<body>
	<div class="btnbox">
		<span onclick="aa(this)">开始</span>
	</div>
	<script>
		function aa(_this){
			//直接用html()覆盖标签中的内容会影响动态元素的事件
			//$('.btnbox').html('<span>等待....</span>');//影响动态元素的事件

			//用append()不会影响点击事件,但如果用empty()方法删除子元素还是会影响后续添加的元素的事件
			// $('.btnbox').empty()//影响动态元素点击事件
			$('.btnbox span').css('display','none')//不影响
			
			$('.btnbox').append('<span>等待....</span>');//不影响

			setTimeout(function(){
				$('.btnbox').html('<span onclick="aa(this)"><b>选择</b></span>')//不影响
				$('.btnbox span').addClass('submit')
				console.log(6666)
			},600)
		}
	</script>
</body>
</html>