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

来源：互联网发布：淘宝上卖的龙钞真假编辑：程序博客网时间：2024/05/16 15:24

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

看看下面的代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><style>.a {width: 100px;height: 100px;background: #000;margin: 10px;}</style><body><button onclick="showbtn()">展示</button><button onclick="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

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

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