今天项目中UI设计了一个鼠标划入和划出的效果,本来这个小效果是非常简单的!可是在实际的生产环境中就出现了一点点问题!因为在实际的环境中,数据全部是用ajax异步加载进去的,这样就造成了hover方法不能用了。先看一下原来的代码:

 $('ul li').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
})

原理也非常简单,就是在鼠标进入的时候,给这个Li加入hover的类名,然后鼠标划出的时候删除这个类名。非常简单的小效果。ajax异步加载我们就要用事件绑定了,把这个事件绑定在他们的父元素ul上(li是动态异步添加的),于是有了下面的代码:

 $('ul').on('hover','li',function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
})

后来发现并不能行啊!!!想想也是啊,为什么第三个参数!

  这里就要复习一下on的用法了,我们这里用的on事件其实是原来的delegate事件。详细的信息请移步:http://www.runoob.com/jquery/event-on.html,delegate中第二个参数也就是咱们写的Li是必须的,不能缺少。如果不懂得话可以百度,也可以查看下面的链接http://www.jb51.net/article/46224.htm 而且我还发现,hover是jQuery自己封装的函数,并不是javascript的函数,并且

jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。

jQuery 1.8 版本后该方法触发 mouseover和 mouseout事件。

也就是说hover时间在不同的jq版本中是不一样的,mouseenter是没有冒泡事件的,而mouseover会发生冒泡时间,mouseleave和mouseout一样。具体情况请看下面的小实验:http://www.runoob.com/try/try.php?filename=tryjquery_event_mouseenter_mouseover 相信看了这个后就非常清楚了。

  回到咱们的问题,如果想给异步加载的Li加载上鼠标划入和划出事件,那就只能自己绑定两个事件了!

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});

这样的话就能实现鼠标的事件了!

事件绑定on与hover事件的更多相关文章

  1. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  2. [HTML5]原生事件绑定和jquery动态事件绑定的区别

    原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...

  3. ES之事件绑定,解除绑定以及事件冒泡、事件捕获

    绑定事件的处理方法任何元素都有事件属性,而绑定事件就是将这个事件与一个函数相连接. ①句柄事件dom.onXXX = function () {代码块} 以on开头的事件属于句柄事件兼容性非常好,但是 ...

  4. 13-jQuery事件绑定和常用鼠标事件

    # 关于事件 ## 事件绑定 1.**基本绑定** > $(element).click(function(){})>> $(element).dblclick(function() ...

  5. 【swift】长按事件绑定,平移滑动事件+坐标获取

    为何把这两个事件归类在一起? 我后来才明白,iOS有一个手势事件(UiGestureRecognizer) 事件里有7个功能,不过我只试过前两个,也就是标题的这两个(长按.平移滑动) UILongPr ...

  6. MVVM设计模式和WPF中的实现(四)事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  7. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  8. dojo事件驱动编程之事件绑定

    什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...

  9. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

随机推荐

  1. python基础之函数式编程

    一.定义: 函数作为参数作用:将核心逻辑传入方法体,使该方法的适用性更广,体现了面向对象的开闭原则: 函数作为返回值作用:逻辑连续,当内部函数被调用时,不脱离当前的逻辑. 二.高阶函数: 1.定义:将 ...

  2. dc的博客翻修计划启动

    紫书大部分学习完毕,等待一轮补完计划: 白书正在攻略中,进度百分之30: 博客翻修计划启动,我会在本学期内逐渐写系统性的学习笔记,我学习时遇到的困难的地方会有说明: 每个部分一定会放上经过验证的实现: ...

  3. 长沙学院APP

    一.开发背景 作为一名长大学子,我认为我们学校没有一个自己专属的手机APP是一件遗憾的事情,虽然大部分的211,985高校也没有一个自己专属的APP,所以,要是我们学校能开发一个出来,那逼格肯定就不一 ...

  4. 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图

    先上结果: 之前 在公司业务中用过java+Selenium+ChromeDriver ,使用起来非常顺手,可以完美模拟真实的用户浏览行为.最近休息的时候想用C#也试一下,于是有了本文. 实现原理一样 ...

  5. [Swift]LeetCode109. 有序链表转换二叉搜索树 | Convert Sorted List to Binary Search Tree

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  6. [Swift]LeetCode554. 砖墙 | Brick Wall

    There is a brick wall in front of you. The wall is rectangular and has several rows of bricks. The b ...

  7. [Swift]LeetCode792. 匹配子序列的单词数 | Number of Matching Subsequences

    Given string S and a dictionary of words words, find the number of words[i] that is a subsequence of ...

  8. PHP实现登录注册

    一.首先实现一个PHP的简单登录注册的话 我们要简单的与后端定义一下接口和传输数据的方式 并且我们要有一个phpStudy服务器. 第一步:当我们点击注册按钮的时候数据库要接收到客户端请求的数据  第 ...

  9. IView组件化之部署及按钮学习

    IView是什么? iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. Npm安装IView npm install iview 在main.js中配置I ...

  10. android 垃圾回收机制

    1.垃圾收集算法的核心思想 java语言提供了自动的GC机制,系统会经常检查内存,采用对象引用计数的方式,将引用次数为0的对象回收.这样可以防止两个危险:(1)防止无用对象占用内存资源 (2)防止有用 ...