关于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 内置对象属性及方法集合
Jul 04 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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 咖啡文化
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
PHP return语句的另一个作用
2014/07/30 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
canvas实现流星雨的背景效果
2017/01/13 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
python实现交并比IOU教程
2020/04/16 Python
Python 如何测试文件是否存在
2020/07/31 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
Python中pass的作用与使用教程
2020/11/13 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
中药学自荐信
2014/06/15 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers