Heim > Artikel > Web-Frontend > JS-Implementierungsbeispiel für das Hinzufügen von Ereignisoperationen zu dynamisch erstellten Elementen

JS-Implementierungsbeispiel für das Hinzufügen von Ereignisoperationen zu dynamisch erstellten Elementen

亚连Original: 2018-05-29 16:22:281756Durchsuche

Dieser Artikel stellt hauptsächlich die JS-Implementierung des Hinzufügens von Ereignisoperationen zu dynamisch erstellten Elementen vor, einschließlich des dynamischen Hinzufügens von Javascript-Seitenelementen und der Fähigkeit zur Ereignisantwort. Freunde in Not können sich darauf beziehen

Die Beispiele in Dieser Artikel beschreibt die Implementierung von JS-Ereignisoperationen für dynamisch erstellte Elemente. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wir alle wissen, wie man Ereignisse zu direkt in HTML generierten Elementen hinzufügt, aber wie fügt man Ereignisse zu einem dynamisch generierten Element hinzu? in jquery kann Um dies zu erreichenlive

Die spezifische Implementierung ist in der Demo zu sehen

<!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>

Die laufenden Ergebnisse:

Das Obige ist Was ich für alle zusammengestellt habe, hoffe ich, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Einführung in die Aufrufsequenz von Funktionen in Vue

Detaillierte Erläuterung dynamischer Komponenten und Rendering basierend auf Vue2. 0

Vue implementiert Methoden zum dynamischen Erstellen und Löschen von Daten

Das obige ist der detaillierte Inhalt vonJS-Implementierungsbeispiel für das Hinzufügen von Ereignisoperationen zu dynamisch erstellten Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiele für dynamische Vue-Routing-Umleitung und NavigationsschutzNächster Artikel：Beispiele für dynamische Vue-Routing-Umleitung und Navigationsschutz

In Verbindung stehende Artikel

Mehr sehen