動的に追加された要素にイベント関数を追加するJS実装例-jsチュートリアル-php.cn

動的に追加された要素にイベント関数を追加するJS実装例

亚连

リリース： 2018-05-26 17:30:00

オリジナル

1762 人が閲覧しました

この記事では、動的に追加された要素にイベントを追加する JS 実装を主に紹介し、動的に追加された要素にイベントを追加するためのイベント委任に基づいた JavaScript の関連操作スキルを分析します。では、動的に追加された要素にイベント関数を追加する JS 実装について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

日常の開発では js を使用していくつかの要素を作成することがありますが、作成したノードにイベントを追加するために独自の for ループを使用すると、動作しないことがよくあります:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net js动态添加事件</title>
</head>
<body>
 <ul id="out-ul">
  <li class="out-li">123</li>
  <li class="out-li">123</li>
  <li class="out-li">123</li>
 </ul>
 <button id="btn">添加</button>
 <script>
  document.getElementById(&#39;btn&#39;).addEventListener(&#39;click&#39;,function(){
   var htmlFragment=&#39;<li>我是新增的li</li>&#39;;
   var addLi=document.createElement(&#39;li&#39;);
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  var outUl=document.getElementById(&#39;out-ul&#39;)
  var outLi=outUl.getElementsByClassName(&#39;out-li&#39;);
  for(var i=0;i<outLi.length;i++){
   outLi[i].onclick=function(){
    alert(1);
   }
  }
 </script>
</body>
</html>

ログイン後にコピー

動作効果:

たとえば、for ループを通じて li に追加されたイベントは、新しく追加された li にバインドできません。詳しい理由はここでは説明しません。では、これをどうやって解決するのでしょうか? 実際、その方法も簡単で、上記のコードを次のように変更するだけです: