关于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 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
js实现显示手机号码效果
Mar 09 Javascript
基于vue实现分页效果
Nov 06 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
JavaScript实现滑块验证解锁
Jan 07 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
PHP EOT定界符的使用详解
2008/09/30 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
Python 功能和特点(新手必学)
2015/12/30 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
logging level级别介绍
2020/02/21 Python
用 python 进行微信好友信息分析
2020/11/28 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
人力资源作业细则
2014/03/03 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
放射科岗位职责
2015/02/14 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
导游词之阆中古城
2019/12/23 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
Python制作表白爱心合集
2022/01/22 Python