首先要明白浏览器在加载页面的时候是按顺序来加载的，这样以来就很清楚了，js动态添加dom以后，这些dom并没有绑定事件，这个时候最简单的一个办法就是：将绑定事件的方法封装到一个函数A中，在动态添加完dom以后立即执行一次函数A即可。

需要注意的是，在你可能同时需要添加许多的dom，不要添加一个就执行一次函数A，这样会增加浏览器的负载，你需要在所有dom添加完以后在执行函数A，例如你用一个for循环遍历dom组合并拼接成一个字符串，然后添加到某个父级dom里面，这个时候你需要在循环外添加一次就可以了。

　　代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>添加div并绑定点击事件</title>

     <style>

         div.btn{

             width: 200px;

             height: 50px;

             line-height: 50px;

             text-align: center;

             border: solid 1px #000;

             cursor: pointer;

         }

         div.innerDiv{

             width: 50px;

             height: 50px;

             background-color: black;

             margin: 10px;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

 <div class="aa">

     <div class="btn">添加div并绑定点击事件</div>

     <div class="outerDiv"></div>

 </div>

 <script>

     function getClass(classname) {

         return document.getElementsByClassName(classname);

     }

     getClass('btn')[0].onclick=function () {

         addDom();

     }

 //    将点击事件封装为函数

     function funA() {

         for(var i=0;i<getClass('innerDiv').length;i++){

             getClass('innerDiv')[i].onclick=function () {

                 alert(this.innerText);

             }

         }

     }

 //    将添加dom封装为函数

     function addDom() {

         var oldHtml='';

         for(var j=0;j<6;j++){

             oldHtml+='<div class="innerDiv">'+j+'</div>'

         }

         getClass('outerDiv')[0].innerHTML=oldHtml;

         funA();

     }

 //    如果将函数A放在这里就不会起作用的

 //    funA();

 </script>

 </body>

 </html>

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

【原生js】js动态添加dom，如何绑定事件的更多相关文章

  1. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  2. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  3. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  4. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  5. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  6. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  7. Angularjs 动态添加指令并绑定事件

    先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...

  8. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  9. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  10. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

随机推荐

  1. ASP.NET MVC应用程序处理并发

    为ASP.NET MVC应用程序处理并发 2014-05-14 08:37 by Bce, 694 阅读, 2 评论, 收藏, 编辑 这是微软官方教程Getting Started with Enti ...

  2. Data Annotations

    Data Annotations   Entity Framework Code First 利用一种被称为约定(Conventions)优于配置(Configuration)的编程模式允许你使用自己 ...

  3. 怎么让猫吃辣椒 转载自 xiaotie

    典故: 某日,毛.周.刘三人聊天. 毛:怎么能让猫自愿吃辣椒? 刘:掐着脖子灌. 毛:强迫不是自愿. 周: 先饿几天,再混到猫爱吃的东西里. 毛:欺骗不是自愿.把辣椒涂到猫肛门上,它就会自己去舔了. ...

  4. UNIX基础知识--<<UNIX 环境编程>>读书笔记

    1 shell程序就是位于应用软件与系统调用之间的程序   每个用户登录系统,系统就会为用户分配shell (用户的登录的口令文件 在  /etc/passwd 2 ls filename  运行原理 ...

  5. C/C++基础知识总结——多态性

    1. 多态性的概述 1.1 多态是指同样的消息被不同类型的对象接收时导致不同的行为.所谓消息是指对垒的成员函数的调用,不同行为是指不同的实现. 1.2 多态的实现 (1) 实现角度讲多态可分为两类:编 ...

  6. SPI and API

    目录 背景从面向接口编程说起“接口”位于“调用方”所在的“包”中“接口”位于“实现方”所在的“包”中“接口”位于独立的“包”中需要注意的事项另外一张图备注 背景返回目录 第一次听说 SPI 是阅读&l ...

  7. ie7,8下__flash__addCallback报错原因及解决方案

    首先附张图,以直观说明错误的现象:(ie7.8)

  8. java 的sigola orm 的开发，第一次学写java，可以用在play上面

    当然还是开源:https://github.com/xiaose1205/sigola     初学者有用,高手可以给点建议,勿喷啊.net转java,有些思想还没有那么快转.希望得到大家的支持啊 使 ...

  9. Socket通信之Java学习（一）

    最近从一篇博客中看到了Socket的介绍,是阿蜜果姐姐的博文:http://www.blogjava.net/amigoxie/archive/2007/02/11/99331.html,学习了下. ...

  10. WCF小实例以及三种宿主

    WCF小实例以及三种宿主 最近一直在学习WCF相关知识,下面将通过一个小实例对所学的知识进行简单的回顾:本实例是一个简单三层操作数据库,并且也简单实现的三种宿主(控制台宿主,IIS宿主以及Window ...