Maison >interface Web >js tutoriel >JS ajoute des événements aux éléments ajoutés dynamiquement (code ci-joint)

JS ajoute des événements aux éléments ajoutés dynamiquement (code ci-joint)

php中世界最好的语言original: 2018-05-03 16:25:512329parcourir

Cette fois, je vais vous proposer JS pour ajouter des événements aux éléments ajoutés dynamiquement (avec code). Quelles sont les précautions pour ajouter des événements aux éléments ajoutés dynamiquement dans JS Voici un cas pratique, prenons. un regard.

Nous créons parfois certains éléments via js dans le développement quotidien, mais si vous utilisez la boucle for originale pour ajouter des événements aux nœuds créés, cela ne fonctionne souvent pas :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>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('btn').addEventListener('click',function(){
   var htmlFragment='<li>我是新增的li</li>';
   var addLi=document.createElement('li');
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  var outUl=document.getElementById('out-ul')
  var outLi=outUl.getElementsByClassName('out-li');
  for(var i=0;i<outLi.length;i++){
   outLi[i].onclick=function(){
    alert(1);
   }
  }
 </script>
</body>
</html>

Effet opérationnel :

Par exemple, les événements ajoutés à li via la boucle for ne peuvent pas être liés au li nouvellement ajouté. Les raisons détaillées ne seront pas expliquées. ici. Alors comment résoudre cela ? En fait, la méthode est également simple, qui consiste à le résoudre par délégation d'événement et à saisir directement le code. Le code ci-dessus est simplement modifié :

<!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('out-ul')
  var outLi=outUl.getElementsByClassName('out-li');
  document.getElementById('btn').addEventListener('click',function(){
   var htmlFragment='<li>我是新增的li</li>';
   var addLi=document.createElement('li');
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  outUl.addEventListener('click',function(e){
   e=e || window.event;//兼容ie
   alert(e.target.innerHTML);
  }, false);
 </script>
</body>
</html>

Je crois que vous l'avez maîtrisé. la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de la délégation d'événements JS

Explication détaillée de l'utilisation de calculé dans Vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un composant carrousel d'images dans Vue (avec code)Article suivant：Comment créer un composant carrousel d'images dans Vue (avec code)

Articles Liés

Voir plus