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 获取对象 基本选择与层级
May 31 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
RequireJs的使用详解
Feb 19 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
微信小程序聊天功能的示例代码
Jan 13 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
jquery中this的使用说明
2010/09/06 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
python实现复制文件到指定目录
2019/10/16 Python
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
会计人员岗位职责
2014/03/19 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
2015年教师节活动总结
2015/03/20 职场文书
小马王观后感
2015/06/11 职场文书
2019公司管理制度
2019/04/19 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android