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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
Javascript writable特性介绍
Feb 27 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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
优化PHP代码的53条建议
2008/03/27 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
php session_decode函数用法讲解
2019/05/26 PHP
js验证表单大全
2006/11/25 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JavaScript File分段上传
2016/03/10 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
利用python批量检查网站的可用性
2016/09/09 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Django实现表单验证
2018/09/08 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Django logging配置及使用详解
2019/07/23 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
空乘英文求职信
2014/04/13 职场文书
应聘会计求职信
2014/06/11 职场文书
励志演讲稿500字
2014/08/21 职场文书
干部对照检查材料范文
2014/08/26 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript