关于innerHTML后丢失动态绑定的EVENT问题解决方法


Posted in Javascript onMay 19, 2013

用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,如:
html:

<body><div id='d1'>点击</div></body>

script:
document.getElementById('d1').onclick=function(){alert(1)}; 
var html=document.body.innerHTML; 
document.body.innerHTML=html;

这段代码执行后点击d1是没有任何反应的。
解决方法
把onclick绑定到父元素,利用冒泡原理,判断当前元素是否为d1,若为d1则执行
document.body.onclick=function(e){ 
var e=e||event; 
var current=e.target||e.srcElement 
if(current.id=='d1'){alert(1)} 
}

这也是折中的方法,肯定会影响效率的。
Javascript 相关文章推荐
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
Javascript 实现匿名递归的实例代码
May 25 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
ES6基础之默认参数值
Feb 21 Javascript
实例详解带参数的 npm script
May 28 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 #Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 #Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 #Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 #Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 #Javascript
固定背景实现的背景滚动特效示例分享
May 19 #Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 #Javascript
You might like
MySQL相关说明
2007/01/15 PHP
php 结果集的分页实现代码
2009/03/10 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
js停止输出代码
2008/07/20 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python读取图片属性信息的实现方法
2016/09/11 Python
Python实现两款计算器功能示例
2017/12/19 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
护士自我评价
2014/02/01 职场文书
房屋租赁协议书
2014/10/18 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电