jQuery live( type, fn ) 委派事件实现


Posted in Javascript onOctober 11, 2009

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
还不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是,live()一次只能绑定一个事件。
这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
.live()与流行的liveQuery插件很像,但有以下几个主要区别:
* .live 目前只支持所有事件的子集,支持列表参考上面的说明。
* .live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
* .live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。
要移除用live绑定的事件,请用die方法
返回值
jQuery
参数
type (String) : 一个或多个用空格分隔的事件名
fn (Function) : 欲绑定的事件处理函数
示例
点击生成的p依然据有同样的功能。
HTML 代码:
<p>Click me!</p>
jQuery 代码:

$("p").live("click", function(){ 
$(this).after("<p>Another paragraph!</p>"); 
});
Javascript 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
Javascript 二维数组
Nov 26 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 #Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 #Javascript
js css样式操作代码(批量操作)
Oct 09 #Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 #Javascript
JavaScript delete 属性的使用
Oct 08 #Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 #Javascript
Javascript isArray 数组类型检测函数
Oct 08 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
长波知识介绍
2021/03/01 无线电
php中的时间处理
2006/10/09 PHP
Email+URL的判断和自动转换函数
2006/10/09 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
浅谈Python中的数据类型
2015/05/05 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
对Python中画图时候的线类型详解
2019/07/07 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
求职信模板怎么做
2014/01/26 职场文书
女生抽烟检讨书
2014/10/05 职场文书
六年级学生评语大全
2014/12/26 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
React配置子路由的实现
2021/06/03 Javascript