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 相关文章推荐
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
jQuery事件详解
Feb 23 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
类似天猫商品详情随浏览器移动的示例代码
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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
简单而又朴实的个人求职信分享
2013/12/12 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL