JS获取动态添加元素的方法详解
本文实例讲述了JS获取动态添加元素的方法。分享给大家供大家参考，具体如下：
在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法:
- 1. 在模板引擎里面添加行内事件
- 2. 利用事件的委托获取(常用)
- 3. 在ajax的监听响应完成函数后面获取
一 在模板引擎里面添加行内事件
添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素.
<!-- 1.准备一个模板 -->
<script id="tpl-table" type="text/html">
{{ each rows value key }}
<tr>
<td>
<button type="button" onclick="updateUser({{ value.id }} {{@ ','}} {{value.isDelete}})" id="btn-status" >按钮</button>
</td>
</tr>
{{ /each }}
</script>
//事件函数,书写在单独的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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
JavaScript代表客户端，而Session代表的是服务器（不知道这样说大家是否能够理解）接下来介绍JavaScript如何控制Session，感兴趣的朋友可以了解下啊2013-01-01
这篇文章主要为大家介绍了JavaScript 隐式类型转换规则详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2023-05-05
以下内容基于IE中GIF的onload事件的基础上，故所有测试IE only2007-05-05
本文主要介绍了JavaScript尾递归的实现及应用场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了JavaScript常考手写题中柯里化与数组扁平化、数组去重的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要介绍了JS弹出层的绝对定位居中是如何实现的,需要的朋友可以参考下2014-02-02
远程控制是指通过网络等远距离通讯手段控制另一设备的操作行为，在现实生活中，随着物联网技术的不断发展，远程控制技术越来越重要，本文将详细介绍 JS 实现远程控制的基本原理、开发流程和实现方法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了微信小程序 弹窗输入组件的实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要给大家介绍了关于如何使用less实现随机下雪动画的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
最新评论