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 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
vue的webcamjs集成方式
Nov 16 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中for与foreach的区别分析
2011/03/09 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
Vue基础配置讲解
2019/11/29 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
python with语句的原理与用法详解
2020/03/30 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
酒店人事专员岗位职责
2013/12/19 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
cf战队收人广告词
2014/03/14 职场文书
运输服务质量承诺书
2014/03/27 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
文艺演出主持词
2015/07/01 职场文书
公司庆典主持词
2015/07/04 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
如何用python插入独创性声明
2021/03/31 Python
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS