【原生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>

个人博客：[**午后南杂**](http://recoluan.gitlab.io)

转载于:https://www.cnblogs.com/luanhewei/p/6038198.html

【原生js】js动态添加dom，如何绑定事件相关推荐

js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
Angularjs 动态添加指令并绑定事件
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...
jQuery Dom 操作，动态生成dom，绑定事件
1.获取内容 - text().html()以及val() text()-设置货返回所选的元素的文本内容:$("#text").text(); html()- 设置或返回所选元素的 ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件
文章目录前言一.场景需求还原二.代码示例 1.引入JQuery库 2.代码示例一:HTML中div标签部分二:HTML中script标签部分三:JS文件部分总结前言本篇文章中讲的是在 ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...

【原生js】js动态添加dom，如何绑定事件

【原生js】js动态添加dom，如何绑定事件相关推荐

最新文章

热门文章