jQuery的live()方法对hover事件的处理示例

 一个模仿悬停事件的方法,当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数

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 
待考证...... 
 

时间: 2024-09-17 02:35:52

jQuery的live()方法对hover事件的处理示例的相关文章

jQuery的live()方法对hover事件的处理示例_jquery

hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个函数. 复制代码 代码如下: $('.myDiv').hover(function() { doSomething... }, function() { doSomething... }); 而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候 菜单还没加载出来呢,所以就要用到

jquery中取消和绑定hover事件的实现代码_jquery

在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢? 一.如何绑定hover事件 先看以下代码,假设我们给a标签绑定一个click和hover事件: $(document).ready(function(){ $('a').bind({ hover: function(e) { // Hover event handler alert("

jquery中trigger()无法触发hover事件的解决方法

  jquery中trigger() 方法触发被选元素的指定事件类型了,但有使用过程中会碰到一些问题了,下面我们一起来看看jQuery中trigger()触发hover事件疑问,希望对各位有帮助. 今天做一个项目,遇到了一个问题,是以前没有遇到过的,就此记上一笔. 1.trigger方法解释 官方是这么解释的: 复制代码 代码如下: Description: Execute all handlers and behaviors attached to the matched elements f

jquery中trigger()无法触发hover事件的解决方法_jquery

今天做一个项目,遇到了一个问题,是以前没有遇到过的,就此记上一笔. 1.trigger方法解释 官方是这么解释的: 复制代码 代码如下: Description: Execute all handlers and behaviors attached to the matched elements for the given event type. 用法: .trigger( eventType [, extraParameters] ) 其中eventType包含javascript内置的事件

jQuery使用each方法与for语句遍历数组示例_jquery

本文实例讲述了jQuery使用each方法与for语句遍历数组.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

JQuery中使用on方法绑定hover事件实例_jquery

文本教你用on方法,模拟hover方法. 代码如下: 复制代码 代码如下: $(obj).on("mouseover mouseout",function(event){  if(event.type == "mouseover"){   //鼠标悬浮  }else if(event.type == "mouseout"){   //鼠标离开  } }) 赶紧去试试吧~

全面解析jQuery $(document).ready()和JavaScript onload事件_jquery

对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-1</title> <script type="text/javascript"> document.getElementById("panel").onclick = fu

jQuery hover事件简单实现同时绑定2个方法_jquery

本文实例讲述了jQuery hover事件简单实现同时绑定2个方法.分享给大家供大家参考,具体如下: 这里将hover事件同时挂2个方法: 1个是悬停的时候执行的,另外一个是离开的时候执行 代码如下: $(document).ready(function() { $("#orderedlist li").hover( function() {$(this).addClass("blue");}, function() {$(this).removeClass(&qu

jQuery中hover事件使用方法详解

hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态.当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处 在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常见错 误). 参数 : ove