【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的，这样以来就很清楚了，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，如何绑定事件的更多相关文章
- js动态添加的元素绑定事件
最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- jQuery中如何给动态添加的元素绑定事件
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- jQuery对 动态添加 的元素 绑定事件（on()的用法）
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- Angularjs 动态添加指令并绑定事件
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...
- jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery html动态添加的元素绑定事件详解
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...
- jQuery给动态添加的元素绑定事件的方法
我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv"> <ul></ul> </d ...
随机推荐
- 【转载】如何让Chrome浏览器允许本地环境支持Ajax
转载自:http://www.bewxx.com/news/news_89.html 对于网站前端人员来说,我们在本地开发程序的时候如果用到Ajax的话,通常会使用Firefox来测试,因为Firef ...
- 让VS2010记住TFS的登陆用户名和密码
用VS进行团队开发的都知道,每次打开VS连接TFS的时候,都要提示输入用户名和密码,每次都这样无疑感觉太多此一举了(当然你不想别人操作你的电脑就直接进入项目就没必要这么做),为了像连接远程那样可以记住 ...
- IEnumerable实践应用
1.集合想要支持foreach方式遍历,需要返回一个迭代器(IEnumerator),foreach会自动调用迭代器的状态迁移(MoveNext().Curent.Reset()) #region A ...
- 欧几里德算法及其扩展（推导&&模板）
有关欧几里德算法整理: 1.一些相关概念: <1>.整除性与约数: ①一个整数可以被另外一个整数整除即为d|a(表示d整除a,通俗的说是a可以被d整除),其含义也可以说成,存在某个整数k, ...
- Block formatting context
不会JS中的OOP,你也太菜了吧!(第一篇) 一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合 ...
- Android过滤Logcat输出
logcat和grep配合使用 1.打印特定tag的log,如打印Tag为Adm的Log adb logcat | grep Adm adb logcat | grep - ...
- 添加可运行的js代码
如何在博客园的文章/随笔中添加可运行的js代码 在博客园浏览大牛们写的文章时,经常会看到在文章中混有一些可运行示例,例如司徒正美的博客中: 带有可运行示例 可以点击“运行代码” 经过一番小小的探索,掌 ...
- SVN 在 Xcode中的状态说明
最近同事总是问我关于SVN状态的问题,‘C’是什么意思啦?‘A’是什么意思啦?等等一系列问题. 为了方便以后查阅,以及新同事的快速融入,特在此记录一下^_^. 当然了大家也可以google一下,一搜一 ...
- Kemaswill 机器学习 数据挖掘 推荐系统 Ranking SVM 简介
Ranking SVM 简介 排序一直是信息检索的核心问题之一,Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning to Rank的简介请见我的博文Le ...
- COFF/PE文件结构
COFF/PE文件结构 原创 C++应用程序在Windows下的编译.链接(二)COFF/PE文件结构 2.1概述 在windows操作系统下,可执行文件的存储格式是PE格式:在Linux操作系统下, ...