JS获取动态添加元素的方法详解


Posted in Javascript onJuly 31, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JS求平均值的小例子
Nov 29 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
原生javascript获取元素样式
Dec 31 Javascript
javascript实用方法总结
Feb 06 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
详解Vuex下Store的模块化拆分实践
Jul 31 #Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 #Javascript
Vuex 模块化使用详解
Jul 31 #Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 #Javascript
express框架下使用session的方法
Jul 31 #Javascript
ES6中异步对象Promise用法详解
Jul 31 #Javascript
You might like
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
js获取class的所有元素
2013/03/28 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
python实现爬虫下载美女图片
2015/07/14 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
园林技术个人的自我评价
2014/01/08 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
资料员岗位职责范本
2015/04/13 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis