jQuery给动态添加的元素绑定事件的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下:

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况

例如

<div id="testdiv">
  <ul></ul>
</div>

需要给<ul>里面动态添加的<li>标签添加click事件
 
jquery 1.7版以前使用live动态绑定事件

$("#testdiv ul li").live("click",function(){
});

jquery 1.7版以后使用on动态绑定事件

$("#testdiv ul").on("click","li", function() {
     //do something here
 });

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

Javascript 相关文章推荐
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
jquery滚动加载数据的方法
Mar 09 #Javascript
jQuery晃动层特效实现方法
Mar 09 #Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 #Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 #Javascript
jQuery读取XML文件内容的方法
Mar 09 #Javascript
JQuery动态添加和删除表格行的方法
Mar 09 #Javascript
Python脚本后台运行的几种方式
Mar 09 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
php实现的xml操作类
2016/01/15 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
零基础php编程好学吗
2019/10/11 PHP
基于jquery的表格排序
2010/09/11 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python安装pil库方法及代码
2019/06/25 Python
tensorboard显示空白的解决
2020/02/15 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
保险公司早会主持词
2014/03/22 职场文书
小学教师评语大全
2014/04/23 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
初中家长评语大全
2014/12/26 职场文书
工作检讨书大全
2015/01/26 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
学历证明范文
2015/06/16 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python