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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
DWR Ext 加载数据
Mar 22 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php计算税后工资的方法
2015/07/28 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
js数组操作常用方法
2014/05/08 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Python用threading实现多线程详解
2017/02/03 Python
python 实现有道翻译功能
2021/02/26 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
JAVA和C++的区别
2013/10/06 面试题
安全检查验收制度
2014/01/12 职场文书
优秀教师主要事迹
2014/02/01 职场文书
研讨会主持词
2014/04/02 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
ant design charts 获取后端接口数据展示
2022/05/25 Javascript