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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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/02/03 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php搜索文件程序分享
2015/10/30 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP7 其他修改
2021/03/09 PHP
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
django ajax json的实例代码
2018/05/29 Python
python图像处理入门(一)
2019/04/04 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python实现简单俄罗斯方块
2020/03/13 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
社会实践先进工作者事迹材料
2014/05/06 职场文书
售房协议书
2014/08/19 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2014年维修工作总结
2014/11/22 职场文书