Heim  >  Artikel  >  Web-Frontend  >  关于innerHTML后丢失动态绑定的EVENT问题解决方法_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 17:33:341245Durchsuche

用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,如:
html:

复制代码 代码如下:

点击


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

这也是折中的方法,肯定会影响效率的。
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn