recherche

Maison >interface Web >js tutoriel >Exemple d'implémentation JS d'ajout d'opérations d'événement à des éléments créés dynamiquement

Exemple d'implémentation JS d'ajout d'opérations d'événement à des éléments créés dynamiquement

亚连
亚连original
2018-05-29 16:22:281782parcourir

Cet article présente principalement l'implémentation JS de l'ajout d'opérations d'événement à des éléments créés dynamiquement, impliquant l'ajout dynamique d'éléments de page javascript et des compétences opérationnelles liées à la réponse aux événements. Les amis dans le besoin peuvent s'y référer

Les exemples dans. cet article décrit les opérations d'événement d'implémentation JS pour les éléments créés dynamiquement. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

Nous savons tous comment ajouter des événements à des éléments directement générés en HTML, mais comment ajouter des événements à un élément généré dynamiquement ? en jquery, vous pouvez faire cela live

L'implémentation spécifique peut être vue dans la démo 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net - JS实现为动态创建的元素添加事件</title>
    <script src="js/lib/jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <button id="btn">添加事件</button>
    <p id="panel"></p>
    <script>
//   js原生实现
//     var btn=document.getElementById("btn");
//     btn.onclick=function(){
//       var arr= [];
//       for(var i=0;i<10;i++){
//         arr.push("<p id=&#39;nep&#39;>"+i+"</p>");
//       }
//
//     document.getElementById("panel").innerHTML=arr.join(&#39;<br/>&#39;);
//     }
//
      //jquery部分实现
      $("#btn").click(function(){
        var arr= [];
        for(var i=0;i<10;i++){
          arr.push("<p id=&#39;nep&#39;>"+i+"</p>");
        }
        $("#panel").html(function(){
          return arr.join("<br/>");
        });
      });
      //为动态创建的html标签元素添加事件
      $("#nep").live("click",function(){
        var that=$(this);//获取当前点击的this对象
        console.log(that.text());
      });
    </script>
  </body>
</html>
Résultats en cours d'exécution :

Ce qui précède C'est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Introduction à la séquence d'appel des fonctions dans vue

Explication détaillée des composants dynamiques et rendu basé sur vue2. 0

Vue implémente des méthodes de création et de suppression dynamiques de données

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：Exemples de redirection dynamique de routage Vue et de garde de navigationArticle suivant：Exemples de redirection dynamique de routage Vue et de garde de navigation

Articles Liés

Voir plus