Home > Article > Web Front-end > JS adds events to dynamically created elements

JS adds events to dynamically created elements

小云云Original: 2018-03-19 09:04:401721browse

This article mainly introduces the JS implementation of adding event operations to dynamically created elements, involving the dynamic addition of javascript page elements and event response related operation techniques. Friends in need can refer to it, I hope it can help everyone.

We all know how to add events to elements directly generated in html, but how to add events to a dynamically generated element? The live method in jquery can do this

The specific implementation can be seen in the demo

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

Running results:

Related recommendations:

How to add events to button in React

##jQuery Method for adding events to dynamically generated select elements

The above is the detailed content of JS adds events to dynamically created elements. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of js mouse event examplesNext article：Detailed explanation of js mouse event examples

See more

JS adds events to dynamically created elements

Related articles