关于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)}
}
这也是折中的方法，肯定会影响效率的。
相关文章
JavaScript使用cookie...2007-02-02
这篇文章主要介绍了JS使用正则表达式验证身份证号码的相关资料,需要的朋友可以参考下2017-06-06
多行字符串的作用是用来提高源代码的可读性.尤其是当你处理预定义好的较长字符串时,把这种字符串分成多行书写更有助于提高代码的可读性和可维护性.在一些语言中,多行字符串还可以用来做代码注释. 大部分动态脚本语言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?2014-04-04
在进行页面的跳转的时候,往往需要我们将一些参数携带着传递过去这里的class样式,下面这篇文章主要给大家介绍了关于uniapp页面传参的三种方式,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了关于d3.js数据绑定的相关资料，文中通过示例代码介绍的非常详细，对大家学习只d3.js具有一定的参考价值，需要的朋友下面来一起看看吧。2017-04-04
这篇文章主要介绍了JavaScript中如何计算字符串文本的宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了Bootstrap选项卡与Masonry插件的完美结合的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了微信小程序登录session的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法，本文给大家介绍JavaScript解决单线程缺陷——webWorker,需要的朋友可以参考下2023-06-06
微信小程序表单验证插件WxValidate的二次封装功能（终极版）
这篇文章主要介绍了微信小程序表单验证插件WxValidate的二次封装功能（终极版），文中给大家提到了最终版与前面2版的不同点,需要的朋友可以参考下2019-09-09
最新评论