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 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
DOM 高级编程
May 06 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 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
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
简单了解python的内存管理机制
2019/07/08 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Python requests模块session代码实例
2020/04/14 Python
Python如何将装饰器定义为类
2020/07/30 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
新电JAVA笔试题目
2014/08/31 面试题
管理部部长岗位职责
2013/12/05 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
学用政策心得体会
2014/09/10 职场文书
政协委员个人总结
2015/03/03 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
总经理年会致辞
2015/07/29 职场文书