JS实现为动态创建的元素添加事件操作示例
时间:2019-04-13
本文章向大家介绍JS实现为动态创建的元素添加事件操作示例,主要包括JS实现为动态创建的元素添加事件操作示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考,具体如下:
html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live
方法可以做到这一点
具体实现可以在demo中看到
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net - 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>
运行结果:
PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- 读书笔记(二)对象激活和上下文
- 程序员的噩梦有哪些?除了改需求,还有这些…
- UC Berkeley提出新型分布式执行框架Ray:有望取代Spark
- 卡奇话爬虫使用方法以及下载地址
- flash读取XML 背景自动适应大小
- 记录一个发邮件的cs文件
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox
- xml-rpc(2)-first demo_v2
- xml-rpc(1)-first demo
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局
- 网站源文件被注入了iframe代码—ARP欺骗的木马病毒攻击
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--工作流演示截图
- 基于CPPN与GAN+VAE生成高分辨率图像
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(54)-工作流设计-所有流程监控
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 性能分析(4)- iowait 使用率过高案例
- swagger (GO) API文档工具入门
- 流媒体协议RTSP视频平台EasyNVR录像回看列表删除提示日期错误,遇此问题该怎么解决?
- Azure认知服务之表格识别器
- [Go]go语言实战-go版本的supervisord编译安装与运行
- Kafka2.6.0发布——性能大幅提升
- BlackHat2020议题之Web缓存投毒
- 新版RTSP视频平台EasyNVR视频广场分页数据展示优化
- 自己动手编写一个Mybatis插件:mybatis脱敏插件
- 【每日一题】36. Valid Sudoku
- 【网易云课堂】Java语言程序设计进阶----第一周编程作业
- 11 Confluent_Kafka权威指南 第十一章:流计算
- 简直骚操作,ThreadLocal还能当缓存用
- 品优购(IDEA版)-第一天
- 品优购(IDEA版)-第二天