Maison > interface Web > js tutoriel > le corps du texte

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!