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 相关文章推荐
javascript if条件判断方法小结
May 17 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
JS实现图片切换特效
2019/12/23 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
档案接收函范文
2014/01/10 职场文书
股份转让协议书
2014/04/12 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
少先队中队工作总结
2015/08/14 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
POST提交数据常见的四种方式
2022/01/18 HTML / CSS