ホームページ  >  記事  >  ウェブフロントエンド  >  innerHTML_javascript スキル後に動的バインディングが失われるという EVENT の問題の解決策

innerHTML_javascript スキル後に動的バインディングが失われるという EVENT の問題の解決策

WBOY
WBOYオリジナル
2016-05-16 17:33:341244ブラウズ

innerHTML を使用してコンテンツの一部を取り出し、次に innerHTML でそれを戻すと、次のような元の動的にバインドされたイベントが失われます。
html:

コードをコピー コードは次のとおりです。

Click
>
スクリプト:

コードをコピー コードは次のとおりです:
document.getElementById('d1').onclick =function(){alert(1)};
var html=document.body.innerHTML=html;
このコードを実行した後、d1 をクリックします。応答がありませんでした。

解決策
:
onclick を親要素にバインドし、バブル原理を使用して現在の要素が d1 であるかどうかを判断し、d1 である場合は
を実行します。

コードをコピー
コードは次のとおりです: document.body.onclick=function(e){ var e=e || イベント;
var current=e.target||e.srcElement
if(current.id=='d1'){alert(1)}
}


これも折り目です この方法は確実に効率に影響します。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。