关于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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 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
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
JavaScript的Function详细
2006/11/14 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
JavaScript地理位置信息API
2016/06/11 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python常见文件操作的函数示例代码
2011/11/15 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
想学画画?python满足你!
2020/12/24 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
摄影助理岗位职责
2014/02/07 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers