关于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实现二分查找法实现代码
Nov 12 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
详解vuex状态管理模式
Nov 01 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
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动态生成缩略图并输出显示的方法
2015/04/20 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
爱心募捐通知范文
2015/04/27 职场文书
可怜妈妈观后感
2015/06/09 职场文书
mysql脏页是什么
2021/07/26 MySQL
Django框架模板用法详解
2022/06/10 Python