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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
JavaScript 布尔操作符解析  && || !
Aug 10 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
js 走马灯简单实例
Nov 21 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
浅析vue数据绑定
Jan 17 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
php 获取select下拉列表框的值
2010/05/08 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
PHP内核探索之变量
2015/12/22 PHP
网页javascript精华代码集
2007/01/24 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
js表单登陆验证示例
2016/10/19 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python清除指定目录内所有文件中script的方法
2015/06/30 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python列表操作方法详解
2020/02/09 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
总经理助理的职责
2014/03/14 职场文书
职业生涯规划书前言
2014/04/15 职场文书
品质口号大全
2014/06/17 职场文书
政风行风建设责任书
2014/07/23 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
党员个人自我评价
2015/03/03 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL