首页 > 代码库 > 【原生js】js动态添加dom，如何绑定事件
【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的，这样以来就很清楚了，js动态添加dom以后，这些dom并没有绑定事件，这个时候最简单的一个办法就是：将绑定事件的方法封装到一个函数A中，在动态添加完dom以后立即执行一次函数A即可。
需要注意的是，在你可能同事需要添加许多的dom，不要添加一个就执行一次函数A，这样会增加浏览器的负载，你需要在所有dom添加完以后在执行函数A，例如你用一个for循环遍历dom组合并拼接成一个字符串，然后添加到某个父级dom里面，这个时候你需要在循环外添加一次就可以了。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>添加div并绑定点击事件</title> 6 <style> 7 div.btn{ 8 width: 200px; 9 height: 50px;10 line-height: 50px;11 text-align: center;12 border: solid 1px #000;13 cursor: pointer;14 }15 div.innerDiv{16 width: 50px;17 height: 50px;18 background-color: black;19 margin: 10px;20 cursor: pointer;21 }22 </style>23 </head>24 <body>25 <div class="aa">26 <div class="btn">添加div并绑定点击事件</div>27 <div class="outerDiv"></div>28 </div>29 <script>30 function getClass(classname) {31 return document.getElementsByClassName(classname);32 }33 getClass(‘btn‘)[0].onclick=function () {34 addDom();35 }36 // 将点击事件封装为函数37 function funA() {38 for(var i=0;i<getClass(‘innerDiv‘).length;i++){39 getClass(‘innerDiv‘)[i].onclick=function () {40 alert(this.innerText);41 }42 }43 }44 // 将添加dom封装为函数45 function addDom() {46 var oldHtml=‘‘;47 for(var j=0;j<6;j++){48 oldHtml+=‘<div class="innerDiv">‘+j+‘</div>‘49 }50 getClass(‘outerDiv‘)[0].innerHTML=oldHtml;51 funA();52 }53 // 如果将函数A放在这里就不会起作用的54 // funA();55 </script>56 </body>57 </html>
【原生js】js动态添加dom，如何绑定事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。