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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
小程序调用微信支付的方法
Sep 26 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
Yii调试SQL的常用方法
2014/07/09 PHP
php图像处理类实例
2015/07/28 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
Bootstrap插件全集
2016/07/18 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
express框架下使用session的方法
2019/07/31 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
python条件和循环的使用方法
2013/11/01 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
Python socket聊天脚本代码实例
2020/01/02 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
夜大毕业生自我鉴定
2013/10/31 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
中学校园广播稿
2015/08/18 职场文书
高中历史教学反思
2016/02/19 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
用Python将GIF动图分解成多张静态图片
2021/06/11 Python