Explication détaillée des étapes pour ajouter des événements aux éléments créés dynamiquement à l'aide de JS-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-10 13:56:25

original

2516 Les gens l'ont consulté

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>

Copier après la connexion

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!