300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > js动态添加元素为何 点击事件无效

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

时间:2020-05-29 18:43:28

相关推荐

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的元素的总长度,但是注意下,按照运算的顺序以及逻辑,只有前三个有点击事件,也就是你后面点击添加后增加的都是没有点击事件的。这是一个常识,希望大家不要理所当然的觉得一定会自动添加点击事件,所以我们需要自己去再次添加点击事件,

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。