JS-Implementierungsbeispiel für das Hinzufügen einer Ereignisfunktion zu dynamisch hinzugefügten Elementen-js-Tutorial-php.cn

JS-Implementierungsbeispiel für das Hinzufügen einer Ereignisfunktion zu dynamisch hinzugefügten Elementen

亚连

Freigeben： 2018-05-26 17:30:00

Original

1799 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die JS-Implementierung des Hinzufügens von Ereignissen zu dynamisch hinzugefügten Elementen vor und analysiert die zugehörigen Betriebsfähigkeiten von Javascript basierend auf der Ereignisdelegation, um Ereignisse zu dynamisch hinzugefügten Elementen hinzuzufügen

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung des Hinzufügens von Ereignisfunktionen zu dynamisch hinzugefügten Elementen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Manchmal erstellen wir in der täglichen Entwicklung einige Elemente über js, aber wenn Sie die ursprüngliche for-Schleife verwenden, um Ereignisse zu den erstellten Knoten hinzuzufügen, ist dies häufig der Fall funktioniert nicht:

<!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>

Nach dem Login kopieren

Betriebseffekt:

Zum Beispiel werden die Ereignisse durch die zu li hinzugefügt Die for-Schleife kann nicht an gebunden werden. Die detaillierten Gründe für das neu hinzugefügte li werden hier nicht erläutert. Wie kann man das lösen? Tatsächlich ist die Lösung einfach, das heißt, um es durch Ereignisdelegierung zu lösen, geben Sie den Code direkt ein. Der obige Code wird einfach geändert:

<!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>
  var outUl=document.getElementById(&#39;out-ul&#39;)
  var outLi=outUl.getElementsByClassName(&#39;out-li&#39;);
  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);
  outUl.addEventListener(&#39;click&#39;,function(e){
   e=e || window.event;//兼容ie
   alert(e.target.innerHTML);
  }, false);
 </script>
</body>
</html>

Nach dem Login kopieren

Laufeffekt:

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ajax Daten über Stadtnamen abrufen

Ajax-Formularvalidierung, nachdem MVC auf Bootstrap trifft

Implementierung der AJAX-Anforderungswarteschlange

Das obige ist der detaillierte Inhalt vonJS-Implementierungsbeispiel für das Hinzufügen einer Ereignisfunktion zu dynamisch hinzugefügten Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!