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 相关文章推荐
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php中return的用法实例分析
2015/02/28 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Python中的元组介绍
2019/01/28 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
什么是python的id函数
2020/06/11 Python
python3将变量输入的简单实例
2020/08/19 Python
餐饮部总监岗位职责范文
2014/02/13 职场文书
大学活动总结格式
2014/04/29 职场文书
质量月活动总结
2014/08/26 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
建房合同协议书
2016/03/21 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python