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的元素的总长度，但是注意下，按照运算的顺序以及逻辑，只有前三个有点击事件，也就是你后面点击添加后增加的都是没有点击事件的。这是一个常识，希望大家不要理所当然的觉得一定会自动添加点击事件，所以我们需要自己去再次添加点击事件，
感谢大家浪费时间看我这篇文章，谢谢了
js动态添加元素为何 点击事件无效相关推荐
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- 动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的点击加载评论. 然后再写 $(".get_comment ...
- 动态生成的DOM做点击事件无效
有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section>测试动态生成的DOM点击事件<br ...
- jquery动态渲染绑定点击事件不生效
原因:动态添加的HTML元素是在CSS,JS代码加载完成后再渲染的HTML页面.浏览器解析这些通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面时,这时绑定事件的标签元素还没有生成 ...
- Vue项目--使用事件代理解决v-html 点击事件无效
最近刚开始学习vue,正好就接到一个需要将原来的老项目改成vue.一路学习,一路踩坑. 言归正传,背景是这样的:项目是个后台管理系统,左侧有目录导航栏,如下图. 在之前的项目中,后台返回的是一段拼接好 ...
- 百度地图 app 点击事件无效、不触发 解决方案
百度地图 app 点击事件无效.不触发 解决方案 参考文章: (1)百度地图 app 点击事件无效.不触发 解决方案 (2)https://www.cnblogs.com/muzhe/articles ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定事件的解决方案. 参考文章: (1)jquery动态添加元素无法触发绑定事件的解决方案. (2)https://www.cnblogs.com/momozjm/p/ ...
- centerandzoom 无效_百度地图 app 点击事件无效、不触发 解决方案
参考 https://blog.csdn.net/Davis_Dxs/article/details/82425211 具体问题: 对 "地图" 添加 click 事件,在点击地图 ...
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
最新文章
- 键盘历史记录实用程序已停止工作 解决办法
- Java基础--继承、this、super、抽象类
- h5是什么 www.php.cn,20分钟看懂html5 看看H5都有啥新特性
- C#Socket文件传输（发送与接收代码）
- gsettings命令使用简介
- P5024 保卫王国
- https证书/即SSL数字证书申请途径和流程
- php与python缺点_php和python的比较
- java swing取消按钮_在Java Swing中取消选择单选按钮
- 三分钟轻松了解Spring框架基础知识
- BULK INSERT, 实战手记：让百万级数据瞬间导入SQL Server
- MySQL 数据查询
- java保存视频到本地
- stm32—光敏电阻传感器的初步使用
- 数据库学习（四）—SQL数据查询01（简单方法条件查询）
- 游戏建模：21个人脑壳雕刻小小技巧，非常有用！
- 多目标优化系列（六）SPEA
- 支付系统,支付流程及实现介绍
- 【论文泛读】Leveraging Distribution Alignment via Stein Path for Cross-Domain Cold-Start Recommendation
- python进程间通信时间开销_python 进程间的通信