本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考,具体如下:
html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的<代码>生活> 代码方法可以做到这一点
具体实现可以在演示中看到
& lt; !DOCTYPE html> & lt; html> & lt; head> & lt;元charset=皍tf - 8”比; & lt; title> www.jb51.net JS实现为动态创建的元素添加事件& lt;/title> & lt;脚本src=" https://www.yisu.com/zixun/js/lib/jquery-1.7.2.min.js "祝辞& lt;/script> & lt;/head> & lt; body> & lt;按钮id=" btn "祝辞添加事件& lt;/button> & lt; div id=懊姘濉弊4? lt;/div> & lt; script>//js原生实现//var btn=. getelementbyid (btn);//btn.onclick=function () {//var arr=[];//(var=0; i<10;我+ +){//arr.push (“& lt; p id=靶隆痹凇?我+“& lt;/p>”);//}////. getelementbyid(“委员会”).innerHTML=arr.join (' & lt; br/祝辞');//}////jquery部分实现 $ (" # btn) .click(函数(){ var arr=[]; 我(var=0; i<10;我+ +){ arr.push (“& lt; p id=靶隆痹凇?我+“& lt;/p>”); } $(" #面板”). html(函数(){ 返回arr.join (“& lt; br/祝辞”); }); });//为动态创建的html标签元素添加事件 $ (" # nep) .live(“点击”,函数(){=$ var(这);//获取当前点击的这对象 console.log (that.text ()); }); & lt;/script> & lt;/body> & lt;/html> >之前运行结果:
PS:
<强> >强关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》,《JavaScript操作DOM技巧总结》,《JavaScript查找算法技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
JS实现为动态创建的元素添加事件操作示例