编程 Javascript

关于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)} 
}

这也是折中的方法，肯定会影响效率的。

关于innerHTML后丢失动态绑定的EVENT问题解决方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

分页栏的web标准实现

Nov 01 Javascript

jQuery Mobile页面跳转后未加载外部JS原因分析及解决

Mar 18 Javascript

javascript四舍五入函数代码分享(保留后几位)

Dec 10 Javascript

jQuery实现当按下回车键时绑定点击事件

Jan 28 Javascript

js定时器(执行一次、重复执行)

Mar 07 Javascript

javascript匿名函数应用示例介绍

Mar 07 Javascript

js匿名函数的调用示例(形式多种多样)

Aug 20 Javascript

JS实现表格数据各种搜索功能的方法

Mar 03 Javascript

将页面table内容与样式另存成excel文件的方法

Aug 05 Javascript

实例代码详解jquery.slides.js

Nov 16 Javascript

JS实现颜色动态淡化效果

Mar 06 Javascript

JS数组去重（4种方法）

Mar 27 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