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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python实现扫雷小游戏
2020/04/24 Python
python3中for循环踩过的坑记录
2020/12/14 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
消防先进事迹材料
2014/02/10 职场文书
12月红领巾广播稿
2014/02/13 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
《搭石》教学反思
2014/04/07 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
党校毕业心得体会
2014/09/13 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
Python time库的时间时钟处理
2021/05/02 Python