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 相关文章推荐
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
js实现ajax的用户简单登入功能
Jun 18 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
MySQL数据源表结构图示
2008/06/05 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
详解JavaScript函数
2015/12/01 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python里对list中的整数求平均并排序
2014/09/12 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python实现求最长回文子串长度
2018/01/22 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python内置异常类型全面汇总
2020/05/28 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
先进党支部事迹材料
2014/01/13 职场文书
师德师风承诺书
2014/05/23 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
导游词之山东八大关
2019/12/18 职场文书
Python中常见的导入方式总结
2021/05/06 Python