js动态添加元素为何 点击事件无效

本来觉得不用提的,但是发现最近几个朋友在提,而且新来的小兄弟也有点迷糊这个,所以就简单说说,


看看下面的代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		.a {width: 100px;height: 100px;	background: #000;margin: 10px;
		}
	</style>

	<body>
		<button οnclick="showbtn()">展示</button>
		<button οnclick="adda()">增加</button>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>

	</body>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
	<script>
		function showbtn(){
			alert('共计class为a的有:'+document.querySelectorAll(".a").length);
		}
		function adda(){
			$("body").append("<div class='a'>aaa</div>")
		}
		$(".a").each(function(index){
			$(this).bind("click",function(){
				alert("这是排下来的第"+index+'个');
			})
		})
	</script>

</html>

当点击左边按钮的时候,自然会显示出所有class为a的元素的总长度,但是注意下,按照运算的顺序以及逻辑,只有前三个有点击事件,也就是你后面点击添加后增加的都是没有点击事件的。这是一个常识,希望大家不要理所当然的觉得一定会自动添加点击事件,所以我们需要自己去再次添加点击事件,

感谢大家浪费时间看我这篇文章,谢谢了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值