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弹窗代码 可以指定弹出间隔
Jul 03 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
javascript实现Table排序的方法
May 15 Javascript
jquery分割字符串的方法
Jun 24 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
js实现随机点名程序
Sep 17 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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
smarty缓存用法分析
2014/12/16 PHP
smarty内置函数section的用法
2015/01/22 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python的缺点和劣势分析
2019/11/19 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
教师实习自我鉴定
2013/12/13 职场文书
企业贷款委托书格式
2014/09/12 职场文书
企业授权委托书范本
2014/09/22 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
捐款通知怎么写
2015/04/24 职场文书
运动会通讯稿200字
2015/07/20 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技
Mysql如何查看是否使用到索引
2022/12/24 MySQL