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 jQuery $.post $.ajax用法
Jul 09 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
学习YUI.Ext第五日--做拖放Darg&Drop
2007/03/10 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
Python异常学习笔记
2015/02/03 Python
Django中处理出错页面的方法
2015/07/15 Python
python format 格式化输出方法
2018/07/16 Python
python求绝对值的三种方法小结
2019/12/04 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
一年级学生评语大全
2014/04/21 职场文书
文明单位申报材料
2014/12/23 职场文书
实名检举信范文
2015/03/02 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers