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 相关文章推荐
过虑特殊字符输入的js代码
Aug 05 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
微信小程序入门之指南针
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
php技术实现加载字体并保存成图片
2015/07/27 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
php阳历转农历优化版
2016/08/08 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
Prototype使用指南之form.js
2007/01/10 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
在python image 中实现安装中文字体
2020/05/16 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
2014学雷锋活动总结
2014/03/09 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
安全生产责任书范本
2014/04/15 职场文书
党员检讨书范文
2014/12/27 职场文书
基层工作经历证明
2015/06/19 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
vue中 this.$set的使用详解
2021/11/17 Vue.js