首先要明白浏览器在加载页面的时候是按顺序来加载的，这样以来就很清楚了，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>
时间： 2024-08-03 15:24:04