jQuery动态添加的元素绑定事件处理函数代码


Posted in Javascript onAugust 02, 2011

我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。
参考:http://api.jquery.com/live/
以前我们定义事件,比如为元素定义单击事件是这样写的:

$('input').click(function () { 
//处理代码 
});


$('.clickme').bind('click', function() { 
// Bound handler called. 
});

但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。即使你使用jquery的clone函数,它并不能将事件也复制(到目前为止我还不清楚它是为什么这样定义,是没法复制还是刻意这么处理,以防止出现某些异常,这还有待去分析一下jquery的源代码)。
现在,使用live你可以轻松搞定,
$('.clickme').live('click', function() { // Live handler called. });这样,你即使在后面动态插入的元素,也会被绑定事件,$('body').append('<div class="clickme">Another target</div>');
Javascript 相关文章推荐
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js初始化验证实例详解
Nov 26 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 #Javascript
js禁止小键盘输入数字功能代码
Aug 01 #Javascript
js内置对象 学习笔记
Aug 01 #Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 #Javascript
js动态加载以及确定加载完成的代码
Jul 31 #Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 #Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 #Javascript
You might like
PHP define函数的使用说明
2008/08/27 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
js实现消灭星星(web简易版)
2020/03/24 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
Python基础之文件读取的讲解
2019/02/16 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python是什么 Python的用处
2020/05/26 Python
学习Python爬虫的几点建议
2020/08/05 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
大专学生推荐信范文
2013/11/19 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
护士找工作求职信
2014/07/02 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android