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 相关文章推荐
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
js操作iframe父子窗体示例
May 22 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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中的超全局变量
2006/10/09 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
php构造函数与析构函数
2016/04/23 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
Python新手实现2048小游戏
2015/03/31 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
中学教师请假制度
2014/02/03 职场文书
生日宴会主持词
2014/03/20 职场文书
学生安全责任书
2014/04/15 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
同意报考证明
2015/06/17 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
Opencv中cv2.floodFill算法的使用
2021/06/18 Python