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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
Sort()函数的多种用法
Mar 20 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
Vuex提升学习篇
Jan 11 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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
15种PHP Encoder的比较
2007/03/06 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
Javascript的闭包
2009/12/31 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python网页解析器使用实例详解
2020/05/30 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
编辑求职信样本
2013/12/16 职场文书
团队经理竞聘书
2014/03/31 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
母亲节感言
2015/08/03 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技