关于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 删除数组的几种方法小结
Feb 21 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JS实现打砖块游戏
Feb 14 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Python的argparse库使用详解
2018/10/09 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
卫校毕业生自我鉴定
2013/10/31 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
师德师风事迹材料
2014/12/20 职场文书
国庆节慰问信
2015/02/15 职场文书
如何写好开幕词?
2019/06/24 职场文书
比较几种Redis集群方案
2021/06/21 Redis
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
Java 数组的使用
2022/05/11 Java/Android
win7配置本地ftp服务器的图文教程
2022/08/05 Servers