JS adds events to dynamically created elements-JS Tutorial-php.cn

JS adds events to dynamically created elements

小云云

Release： 2018-03-19 09:04:40

Original

1767 people have browsed it

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>

Copy after login

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!