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

站长资源 2024/4/26 佚名

10 1538 10

DDR爱好者之家 Design By 杰米

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

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

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

JS,获取,动态添加,元素

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JS获取动态添加元素的方法详解”

暂无评论...

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

微信小程序iBeacon测距及稳定程序的实现解析

JS/jQuery实现超简单的Table表格添加,删除行功能示例

评论“JS获取动态添加元素的方法详解”

更新日志

友情链接