关于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 设置选中行的样式的实现代码
May 24 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
详解Element-UI中上传的文件前端处理
Aug 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python多线程下信号处理程序示例
2019/05/31 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
英国标准协会商店:BSI Shop
2019/02/25 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
个人租房协议书
2014/04/09 职场文书
会议欢迎标语
2014/06/30 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
李强优秀员工观后感
2015/06/16 职场文书
给校长的建议书范文
2015/09/14 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python