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 相关文章推荐
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
修改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
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
PHP最常用的正则表达式
2017/02/13 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
用javascript作一个通用向导说明
2011/08/30 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
关于js里的this关键字的理解
2015/08/17 Javascript
浅析Jquery操作select
2016/12/13 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Python代码调试的几种方法总结
2015/04/15 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
表扬信格式
2014/01/12 职场文书
庆八一活动方案
2014/01/25 职场文书
红色故事演讲稿
2014/05/22 职场文书
教师党员个人自我评价
2015/03/04 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL