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........ });}
})
四 总结:
第一种方法要注意事件函数必须是全局函数;第二种最常用,但是三者的共同点都是当页面已经渲染完毕后才能获取到动态元素.
JS获取动态添加的元素相关推荐
- 原生js 给动态添加的元素添加(事件监听器)
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
- jquery 如何获取动态添加的元素
2019独角兽企业重金招聘Python工程师标准>>> <td><buttonclass="del">删除</button>& ...
- js给动态添加的元素添加属性
将一段标签动态添加到div中,给这段标签的img标签设置width:100% 一开始设置了添加类名 // 内容 const content = res.data.data.info.content; ...
- 原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素 动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
- js动态添加页面元素
在刚完成的作业中,使用的动态添加页面元素的代码: function add(name) {$("#list").append(" <a class='a' href ...
- js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
- html页面forEach用法,jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach...
本篇文章探讨了jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.开发的时候有时候要循 ...
- javaScript动态添加Li元素
html代码块 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
- 动态添加html元素
document.createElement()创建元素,再用appendChild( )添加 动态引入jquery: var scriptElement=document.createElement ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
最新文章
- python-range用法
- SAP QM维护检验计划指派取样策略时候报错:Sampling procedure is not permitted for insp.point-related inspection
- POJ 3463 Sightseeing(次短路问题)
- Android自定义控件属性的使用
- JS格式化JSON串显示在表格中
- Qt-Creator编译pthread多线程程序的方法
- 2.7 HBase架构深入剖析
- python数据收集系统_玩玩Python数据采集_001
- java后台两个表关联查询_简单界面+JAVA后台+数据库实现页面对数据库的两张关联表操作...
- 一致性哈希算法学习及JAVA代码实现分析
- [转]C/C++ 文件读写操作总结
- window10 mysql5.7 解压版 安装
- iis7.5 php7.0,Win2008R2 IIS7.5 PHP7.3 配置ImageMagick及PHP-Imagick扩展
- 蓝桥杯2015年第六届C/C++A组国赛第四题-穿越雷区
- find命令使用及实例
- 使用pynput模块监听用户键盘输入,保存至txt
- Synchronized的锁优化,kotlin中文文档pdf
- db9针232接口波特率标准_DB9 公头母头引脚定义及连接
- 《未来世界的幸存者》后感
- 痛苦的刷路由器 破校园网 小米mini潘多拉
热门文章
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能(二)
- matlab 中的textscan
- STM32CUDE-STM32F407学习笔记2-按键操作
- Hack the box -- 靶机渗透测试(TIER2)
- win11u盘无法弹出怎么办?win11u盘老是被占用不能退出?
- 2019年全国大学生电子设计竞赛赛题分享与浅析
- 钓鱼网站制作 ---- Setoolkit 克隆web页面钓鱼
- linux命令清理磁盘空间,Linux如何使用命令行清理磁盘来增加空间
- 计算机科学本质源自于数学思维,计算思维的特点、特征:形式化、程序化、机械化...
- js中函数传参的问题