关于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 相关文章推荐
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 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中使用灵巧的体系结构
2006/10/09 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
vue实现页面滚动到底部刷新
2019/08/16 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python实现针对中文排序的方法
2017/05/09 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python lambda表达式用法实例分析
2018/12/25 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
元旦标语大全
2014/10/09 职场文书
幼儿教师个人总结
2015/02/05 职场文书
生日祝酒词大全
2015/08/10 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python