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 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
生成二维码方法汇总
Dec 26 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 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
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
Javascript数组与字典用法分析
2014/12/13 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
分析Python中解析构建数据知识
2018/01/20 Python
python中sys.argv函数精简概括
2018/07/08 Python
利用python开发app实战的方法
2019/07/09 Python
python中count函数简单的实例讲解
2020/02/06 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
业务经理的岗位职责
2013/11/16 职场文书
小学音乐课教学反思
2016/02/18 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库