关于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 页面元素的几个用法总结
Nov 18 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php eval函数用法总结
2012/10/31 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
AutoSave/自动存储功能实现
2007/03/24 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python中常用的内置方法
2019/01/28 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python多线程多进程实例对比解析
2020/03/12 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
广州某公司软件工程师面试题
2014/12/22 面试题
商务日语毕业生自荐信范文
2013/11/14 职场文书
销售冠军获奖感言
2014/02/03 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python