JS获取动态添加元素的方法详解
前端  /  管理员 发布于 4年前   542
本文实例讲述了JS获取动态添加元素的方法。分享给大家供大家参考,具体如下:
在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法:
一 在模板引擎里面添加行内事件
添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素.
//事件函数,书写在单独的JS文件中 //带有参数,参数是模板传递过来的 function updateUser (id,isDelete){ //doSomething......... }
上面使用的模板是art-template,在模板里面我们给button标签注册了点击事件onclick,但是事件函数却是一个带参数的函数.当点击这个按钮的时候,就会触发点击事件,进而调用updateUser()
函数.
二. 利用事件的委托获取(常用)
事件的委托可以为动态添加的元素绑定事件.
//同样以上面的代码为例,tr最后是添加到table中,那么将点击事件委托给table$('table').on('click','tr #btn-status',function(){ //doSomething........})
上面的代码意思是,将点击事件绑定给table元素,但是我们点击的是table里面的button按钮,此时事件的冒泡起作用,向外冒泡遇到父元素table也有点击事件,那么就会去执行这个事件.
三 在ajax的监听响应完成函数后面获取
当我们把模板渲染出来的时候,此时页面上已经是最新的动态元素了,DOM也已经重绘完成,此时再去获取动态元素.
$.ajax({ url : 'text.php', dataType : 'json', success : function(obj){ //渲染动态元素到页面上 var trHTML = template('tpl-table',obj); $('table').append(trHTML); //获取动态元素注册点击事件 $('tr #btn-status').on('click',function(){ //doSomething........ }); }})
四 总结:
第一种方法要注意事件函数必须是全局函数;第二种最常用,但是三者的共同点都是当页面已经渲染完毕后才能获取到动态元素.
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools..net.cn/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号