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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 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
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python做文本按行去重的实现方法
2016/10/19 Python
Python多线程原理与用法详解
2018/08/20 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python如何实现数据的线性拟合
2019/07/19 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python如何快速生成时间戳
2020/07/21 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
农村党员干部承诺书
2015/05/04 职场文书
孔子观后感
2015/06/08 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python