html动态元素和静态元素，以及如何给未来元素绑定事件

nianyuw

已于 2022-07-26 16:45:39 修改

阅读量908

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端三剑客文章标签： html5 javascript

于 2022-04-12 14:33:29 首次发布

本文链接：https://blog.csdn.net/m0_61820867/article/details/124123256

前端三剑客专栏收录该内容

5 篇文章

订阅专栏

这篇博客探讨了HTML中的静态和动态元素的区别。动态元素是通过JavaScript生成的，文中以一个循环为例展示了如何利用jQuery的.append()方法创建动态表格行。同时，讲解了如何使用.on()方法为动态元素绑定事件，特别是当动态元素是静态元素的子节点时，通过已存在的静态元素作为代理来监听动态元素的事件。这种方法避免了直接给动态元素绑定事件可能遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

静态元素：写死在html的元素

动态（未来）元素：通过js后来生成的代码

举例

 for(var i=0;i<arr.length;i++){
     //append是追加函数，是在原数据上面追加，经常搭配 $(".class名").empty()使用，先清空再追加
     //避免数据冗余
     //js弱类型，可用用单双引号切换来标识双引号内的双引号，java要转义
     $(".content").append("<tr>"+
                          "<td><input type='checkbox'></td>"+
                          "<td>"+arr[i].id+"</td>"+
                          "<td>"+arr[i].title+"</td>"+
                          "<td>"+arr[i].desc+"</td>"+
                          "<td>"+arr[i].author+"</td>"+
                          "<td>"+arr[i].createtime+"</td>"+
                          "<td>"+
                          "<input type='button' class='remove' index='"+arr[i].id+"' value='删除'>"+
                          "<input type='button' class='update' index='"+arr[i].id+"' value='修改'>"+
                          "</td>"+
                          "</tr>")
 }

给动态元素绑定事件

用法

 $("已存在的静态元素class名").on("事件类型","未来元素class名",function (){

    })

 //删除
//click只能实现点击事件
$(".remove").click(function (){

})
//用on可用通过选择不同的方法实现不同的效果
$(".remove").on("click",function (){

})

上面两个代码都可以给class为remove的静态元素添加绑定事件

但是给动态（未来）元素绑定事件只能使用on-----借助已有的静态元素寻找动态元素

class为remove的动态元素在class为content的子元素

 $(".content").on("click",".remove",function (){

    })