Exemple d'implémentation JS d'ajout d'opérations d'événement à des éléments créés dynamiquement-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-29 16:22:28

original

1764 Les gens l'ont consulté

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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