DOM变化后事件绑定失效
2015-12-25 13:41
357 查看
前端经常要处理一些点击事件,或者是在用户保存时,做一些检查,这时,我们常常会绑定一些事件,如
click,change等。当然这都是我们经常使用的功能。
有些时候,我们的页面可能还会涉及到一些改变,譬如在点击某个按钮时,在页面中插入一些新的内容,如果此前
我们对这个内容绑定过事件,那么新插入的内容会不会绑定事件呢?很可惜,是没有,因为我们通常都是在页面加
载OK之后就绑定事件,而此时,这部分新内容还未插入到页面。如下:
当前的页面中除了一个file控件,还有一个button按钮。下面是JS的内容,在JS中我们为file控件绑定了change事件,
在点击button按钮时,我们会往页面中插入一个file控件。
通过测试,可以发现,第一个file在change时,是能够触发事件的,而第二插入的file则没有change事件。对于这个问
题,有如下两种解决方法:
第一种是将绑定change事件封装成一个函数,在点击button按钮插入file控件之后,调用这个函数。如下:
另一种方式,是在DOM加载之后和DOM内容发生改变时,绑定file控件的change事件,如下:
click,change等。当然这都是我们经常使用的功能。
有些时候,我们的页面可能还会涉及到一些改变,譬如在点击某个按钮时,在页面中插入一些新的内容,如果此前
我们对这个内容绑定过事件,那么新插入的内容会不会绑定事件呢?很可惜,是没有,因为我们通常都是在页面加
载OK之后就绑定事件,而此时,这部分新内容还未插入到页面。如下:
<!doctype html> <html lang="en"> <head> <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码--> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="关键词一,关键词二"> <meta name="Description" content="网站描述内容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>CSSDemo</title> <!--css js 文件的引入--> <!-- <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/> --> </head> <body> <div id = "content"> <input type="file" /> </div> <div> <input type="button" value="点我"> </div> </body> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> </html>
当前的页面中除了一个file控件,还有一个button按钮。下面是JS的内容,在JS中我们为file控件绑定了change事件,
在点击button按钮时,我们会往页面中插入一个file控件。
<script type="text/javascript"> $(function(){ $('input[type ="file"]').change(function(){ console.log($(this).val() ) if($(this).val() == ""){ alert("你好") } }) $('input[type ="button"]').click(function(){ $("#content").append('<input type="file"/>') }) }) </script>
通过测试,可以发现,第一个file在change时,是能够触发事件的,而第二插入的file则没有change事件。对于这个问
题,有如下两种解决方法:
第一种是将绑定change事件封装成一个函数,在点击button按钮插入file控件之后,调用这个函数。如下:
<script type="text/javascript"> $(function(){ function fileChange(){ $('input[type ="file"]').change(function(){ console.log($(this).val()) if($(this).val() == ""){ alert("你好") } }) } fileChange(); $('input[type ="button"]').click(function(){ $("#content").append('<input type="file"/>'); fileChange(); }) }) </script>
另一种方式,是在DOM加载之后和DOM内容发生改变时,绑定file控件的change事件,如下:
<script type="text/javascript"> window.onload,window.onchange = function(){ $('input[type ="file"]').change(function(){ console.log($(this).val() ) if($(this).val() == ""){ alert("你好") } }) } $('input[type ="button"]').click(function(){ $("#content").append('<input type="file"/>') }) </script>两种方式均能解决此问题,至于究竟使用何种方式,就看个人的喜好。
相关文章推荐
- Xcode7 instruments 入门
- 代理模式(动态代理)
- Clash of Clans, Hay day, Boom Beach等游戏资源包破解
- Oracle delete执行过程的流程介绍
- 2015.12.24
- 文件加密的新选择
- Caffe 的一些文档
- vi使用【逐渐更新】
- BZOJ 1208 [HNOI2004] 宠物收养所 题解&代码
- 连续关两个界面,会造成闪黑屏
- Git SSH Key 生成步骤
- SDCycleScrollView 滚动视图的使用(广告)
- angularjs 过滤多组数据
- Qt5 中的 signal/slot 新语法
- 一个加密解密的小工具
- VC++关键字
- 非常简单的Python HTTP服务
- MySQL数据库的优化–运维架构师必会高薪技能
- [IOS 开发] GCD学习 dispatch_barrier_async
- Android进程间通信之Messenger浅析