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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
node实现爬虫的几种简易方式
Aug 22 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 数组教程 定义数组
2009/10/23 PHP
php生成QRcode实例
2014/09/22 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php使用session二维数组实例
2014/11/06 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
python实现清屏的方法
2015/04/30 Python
python实现上传下载文件功能
2020/11/19 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
为什么需要版本控制
2016/10/28 面试题
企业安全生产责任书
2014/04/14 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
房租涨价通知
2015/04/23 职场文书
单位实习介绍信
2015/05/05 职场文书
好人好事新闻稿
2015/07/17 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
MySQL数据库之存储过程 procedure
2022/06/16 MySQL