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打印图片pdf、txt示例代码
Jul 22 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Javascript中的async awai的用法
May 17 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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的FTP学习(四)
2006/10/09 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python绘制直方图和密度图的实例
2019/07/08 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
shell的种类有哪些
2015/04/15 面试题
生产厂厂长岗位职责
2013/12/25 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
会计专业求职信
2014/08/10 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
Python pyecharts绘制条形图详解
2022/04/02 Python
nginx之内存池的实现
2022/06/28 Servers