关于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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 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-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
Python对列表排序的方法实例分析
2015/05/16 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
详解django三种文件下载方式
2018/04/06 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python文件路径名的操作方法
2019/10/30 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
应届毕业生求职信范文分享
2013/12/26 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
师德师风建设方案
2014/05/08 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
在python中实现导入一个需要传参的模块
2021/05/12 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python