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 相关文章推荐
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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数据库连接
2006/10/09 PHP
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
jQuery的学习步骤
2011/02/23 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django URL传递参数的方法总结
2016/08/28 Python
Python正则表达式完全指南
2017/05/25 Python
python与字符编码问题
2019/05/24 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Django发送邮件功能实例详解
2019/09/02 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
python与pycharm有何区别
2020/07/01 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
主题酒店策划书
2014/01/28 职场文书
党校毕业心得体会
2014/09/13 职场文书
银行贷款委托书范本
2014/10/11 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python