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 相关文章推荐
Javascript 类型转换方法
Oct 24 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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
php md5下16位和32位的实现代码
2008/04/09 PHP
php 静态化实现代码
2009/03/20 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP设置进度条的方法
2015/07/08 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
学生就业推荐信
2013/11/13 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
教师党员整改措施
2014/10/24 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers