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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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
YII路径的用法总结
2014/07/09 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
prototype1.4中文手册
2006/09/22 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
分页栏的web标准实现
2011/11/01 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
js实现3D旋转相册
2020/08/02 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python 整数越界问题详解
2019/06/27 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python Django view 两种return的实现方式
2020/03/16 Python
查看keras的默认backend实现方式
2020/06/19 Python
python两种注释用法的示例
2020/10/09 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
董事长职责范文
2013/11/08 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
先进事迹材料范文
2014/12/29 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书