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:void(0)的真正含义实例分析
Aug 20 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
JS实现的文件拖拽上传功能示例
May 21 Javascript
微信小程序wx:for循环的实例详解
Oct 07 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实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python递归函数特点及原理解析
2020/03/04 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
用python读取xlsx文件
2020/12/17 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
创业资金计划书
2014/02/06 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
就业协议书范本
2014/10/08 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
学校教学工作总结2015
2015/05/19 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
AI:如何训练机器学习的模型
2021/04/16 Python
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers