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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
iScroll.js 使用方法参考
May 16 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
js常见遍历操作小结
Jun 06 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
小程序实现侧滑删除功能
Jun 25 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关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
python静态方法实例
2015/01/14 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
中学校庆方案
2014/03/17 职场文书
教书育人演讲稿
2014/09/11 职场文书
二手房购房协议书范本
2014/10/05 职场文书
学生检讨书
2015/01/27 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
2016年寒假家长评语
2015/10/10 职场文书
宣传委员竞选稿
2015/11/19 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python