JS实现为动态创建的元素添加事件操作示例

2019-11-19 14:08:43

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考，具体如下：

html中直接生成的元素，添加事件，我们都知道，但是如何为一个动态生成的元素添加事件呢，jquery中的live方法可以做到这一点

具体实现可以在demo中看到

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>www.VeVB.COm - JS实现为动态创建的元素添加事件</title>    <script src="js/lib/jquery-1.7.2.min.js"></script>  </head>  <body>    <button id="btn">添加事件</button>    <div id="panel"></div>    <script>//   js原生实现//     var btn=document.getElementById("btn");//     btn.onclick=function(){//       var arr= [];//       for(var i=0;i<10;i++){//         arr.push("<p id='nep'>"+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='nep'>"+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>

运行结果：