您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考,具体如下:
html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live
方法可以做到这一点
具体实现可以在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> <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>
运行结果:
PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。