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判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
解决vue移动端适配问题
Dec 12 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 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 中英文语言转换类代码
2011/08/11 PHP
PHP编程函数安全篇
2013/01/08 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
django admin组件使用方法详解
2019/07/19 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python列表生成器迭代器实例解析
2019/12/19 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
如何理解Python中的变量
2020/06/01 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
html Table 表头固定的实现
2019/01/22 HTML / CSS
大学新生军训感言
2014/02/25 职场文书
租房协议书
2014/04/10 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
电台广播稿范文
2015/08/19 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技