jQuery的live()方法对hover事件的处理示例


Posted in Javascript onFebruary 27, 2014

hover([over,]out)

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。

当鼠标移出这个元素时,会触发指定的第二个函数。

$('.myDiv').hover(function() { 
doSomething... 
}, function() { 
doSomething... 
});

而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候

菜单还没加载出来呢,所以就要用到jquery的另一个方法live()

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:

绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live() 的事件处理函数不会绑定在元素上,

而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

$('.myDiv').live('hover',function(event){ 
if(event.type=='mouseenter'){ 
doSomething... 
}else{ 
doSomething... 
} 
})

有的jquery版本响应的是mouseenter和mouseleave
有的是mouseover和mouseout
待考证......
Javascript 相关文章推荐
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
javascript内存管理详细解析
Nov 11 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
Three.js学习之网格
Aug 10 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 #Javascript
css结合js制作下拉菜单示例代码
Feb 27 #Javascript
js function定义函数的几种不错方法
Feb 27 #Javascript
window.open 以post方式传递参数示例代码
Feb 27 #Javascript
jQuery之ajax删除详解
Feb 27 #Javascript
jQuery之字体大小的设置方法
Feb 27 #Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python实现读取命令行参数的方法
2015/05/22 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
pycharm的python_stubs问题
2020/04/08 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
小学庆六一活动方案
2014/02/28 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
广播节目策划方案
2014/05/23 职场文书
社区服务标语
2014/07/01 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书