关于innerHTML后丢失动态绑定的EVENT问题解决方法
更新时间：2013年05月19日 16:30:56 作者：
用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失，下面与大家分享下解决方法，感兴趣的朋友可以参考下哈
用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)}
}
这也是折中的方法，肯定会影响效率的。
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)}
}
这也是折中的方法，肯定会影响效率的。
相关文章
这篇文章主要介绍了微信小程序tab切换可滑动切换导航栏跟随滚动实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
下面小编就为大家带来一篇浅谈JS中的bind方法与函数柯里化。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
下面小编就为大家带来一篇js 点击a标签 获取a的自定义属性方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了JavaScript对JSON数组简单排序操作,结合实例形式分析了javascript使用sort()方法针对json数组元素排序的相关操作技巧与注意事项,需要的朋友可以参考下2019-01-01
本篇文章主要是对JS获取月的最后一天与JS得到一个月份最大天数的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了Typescript中索引签名使用详解,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了js实现带按钮的上下滚动效果,设计javascript鼠标事件及页面元素样式的相关操作技巧,需要的朋友可以参考下2015-05-05
选择指定数量后checkbox不可选(变灰)javascript代码
选择指定数量后checkbox不可选(变灰)javascript代码2009-06-06
javascript来实现动画导航效果是通过定时器与鼠标事件响应相结合,动态修改页面元素属性实现的动画导航效果,需要的朋友可以参考一下2007-12-12
这篇文章主要介绍了weui上传多图片,压缩,base64编码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
最新评论