html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live方法可以做到这一点
具体实现可以在demo中看到
<!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='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>
运行结果:
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
js解析数据技巧总结
js中dom事件绑定使用小技巧
以上就是js给动态创建元素添加事件步骤详解的详细内容。