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


Posted in Javascript onMay 07, 2015

今天做一个项目,遇到了一个问题,是以前没有遇到过的,就此记上一笔。

1、trigger方法解释

官方是这么解释的:

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

用法:
.trigger( eventType [, extraParameters] )

其中eventType包含javascript内置的事件、jQuery增加的事件和自定义事件。例如:

$('#foo').bind('click', function()
{
 alert($(this).text());
});
$('#foo').trigger('click');
$('#foo').bind('custom', function(event, param1, param2)
{
 alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

很强大,常常用于页面初始化的时候使用。

2、trigger遇到hover

var $search=$('#header .search');
$search.find('li').hover(function()
{
 alert(1);
},function()
{
 alert(2);
});
$search.find('li').eq(0).trigger('hover');

无法触发hover。但是:

var $search=$('#header .search');
$search.find('li').click(function()
{
 alert(1);
},function()
{
 alert(2);
});
$search.find('li').eq(0).trigger('click');

触发click正常!

解决办法:

var $search=$('#header .search');
$search.find('li').hover(function()
{
 alert(1);
},function()
{
 alert(2);
});
$search.find('li').eq(0).trigger('mouseenter');//hover修改为mouseenter/mouseleave/mouseover/mouseout

同样的情况存在于jQuery.live(),不过live不推荐在1.7以后版本使用,使用on()代替。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
javascript实现的图片切割多块效果实例
May 07 #Javascript
javascript中indexOf技术详解
May 07 #Javascript
javascript限制文本框输入值类型的方法
May 07 #Javascript
浅谈Javascript的静态属性和原型属性
May 07 #Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 #Javascript
JS中获取函数调用链所有参数的方法
May 07 #Javascript
jQuery中animate动画第二次点击事件没反应
May 07 #Javascript
You might like
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
原生js实现轮播图
2017/02/27 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
Python pandas库中的isnull()详解
2019/12/26 Python
python实现串口通信的示例代码
2020/02/10 Python
python自动点赞功能的实现思路
2020/02/26 Python
Python实现扫码工具的示例代码
2020/10/09 Python
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
运动会解说词200字
2014/02/06 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
python图像处理 PIL Image操作实例
2022/04/09 Python
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS