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 特性检测并非浏览器检测
Jan 15 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
JavaScript实现通讯录功能
Dec 27 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
推荐一篇入门级的Class文章
2007/03/19 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python中使用item()方法遍历字典的例子
2014/08/26 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python内存映射文件读写方式
2020/04/24 Python
Python3实现飞机大战游戏
2020/04/24 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
MySQL锁机制
2021/04/05 MySQL