recherche

Maison  >  Article  >  interface Web  >  Explication détaillée des étapes pour ajouter des événements aux éléments créés dynamiquement à l'aide de JS

Explication détaillée des étapes pour ajouter des événements aux éléments créés dynamiquement à l'aide de JS

php中世界最好的语言
php中世界最好的语言original
2018-05-10 13:56:252489parcourir

Cette fois, je vais vous donner une explication détaillée des étapes pour ajouter des événements aux éléments créés dynamiquement avec JS. Quelles sont les précautions pour ajouter des événements aux éléments créés dynamiquement avec JS. Voici des cas pratiques, jetons un coup d'oeil.

Nous savons tous comment ajouter des événements à des éléments générés directement en HTML, mais comment ajouter des événements à un élément généré dynamiquement ? La méthode live en jquery peut le faire

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>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('<br/>');
//     }
//
      //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 :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, venez s'il vous plaît pour des informations plus intéressantes, faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé des compétences en analyse de données js

Conseils pour utiliser la liaison d'événements DOM dans 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：Implémentation de la redirection dynamique de routage Vue et de la garde de navigationArticle suivant：Implémentation de la redirection dynamique de routage Vue et de la garde de navigation

Articles Liés

Voir plus