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实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
BootStrap selectpicker
Jun 20 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
JS原型与继承操作示例
May 09 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
基于php实现的验证码小程序
2016/12/13 PHP
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
js动态切换图片的方法
2015/01/20 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
js实现金山打字通小游戏
2020/07/24 Javascript
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python和opencv实现抠图
2018/07/18 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python tkinter控件布局项目实例
2019/11/04 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
vue常用指令代码实例总结
2020/03/16 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
品恩科技软件测试面试题
2014/10/26 面试题
4s店机修工岗位职责
2013/12/20 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
幼儿教师考核制度
2014/01/25 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Java版 单机五子棋
2022/05/04 Java/Android