JS实现为动态创建的元素添加事件操作示例


Posted in Javascript onMarch 17, 2018

本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考,具体如下:

html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live方法可以做到这一点

具体实现可以在demo中看到

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com - JS实现为动态创建的元素添加事件</title>
    <script src="js/lib/jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <button id="btn">添加事件</button>
    <div id="panel"></div>
    <script>
//   js原生实现
//     var btn=document.getElementById("btn");
//     btn.onclick=function(){
//       var arr= [];
//       for(var i=0;i<10;i++){
//         arr.push("<p id='nep'>"+i+"</p>");
//       }
//
//     document.getElementById("panel").innerHTML=arr.join('<br/>');
//     }
//
      //jquery部分实现
      $("#btn").click(function(){
        var arr= [];
        for(var i=0;i<10;i++){
          arr.push("<p id='nep'>"+i+"</p>");
        }
        $("#panel").html(function(){
          return arr.join("<br/>");
        });
      });
      //为动态创建的html标签元素添加事件
      $("#nep").live("click",function(){
        var that=$(this);//获取当前点击的this对象
        console.log(that.text());
      });
    </script>
  </body>
</html>

运行结果:

JS实现为动态创建的元素添加事件操作示例

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
详解JS预解析原理
Jun 16 Javascript
对vue里函数的调用顺序介绍
Mar 17 #Javascript
基于vue2.0动态组件及render详解
Mar 17 #Javascript
Vue实现动态创建和删除数据的方法
Mar 17 #Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 #Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 #Javascript
解决vue页面DOM操作不生效的问题
Mar 17 #Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 #Javascript
You might like
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
MySQL数据源表结构图示
2008/06/05 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
python实现简单的tcp 文件下载
2020/09/16 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
高一家长会邀请函
2014/01/12 职场文书
超级搞笑检讨书
2014/01/15 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
四下基层实施方案
2014/03/28 职场文书
促销活动计划书
2014/05/02 职场文书
领导参观欢迎词
2015/01/26 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
实习单位鉴定意见
2015/06/04 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
python flask框架快速入门
2021/05/14 Python