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 相关文章推荐
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
为原生js Array增加each方法
2012/04/07 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
安全员岗位职责
2013/11/11 职场文书
森林病虫害防治方案
2014/06/02 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
云台山导游词
2015/02/03 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
红色经典观后感
2015/06/18 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
小程序实现侧滑删除功能
2022/06/25 Javascript