今天项目中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. framework7 入门(数据绑定)

    数据绑定是用template7,官网,framework7内置template7,不用单独下载,下面介绍一些简单的绑定 当你的数据是个数组 return{ data:function(){ let i ...

  2. for循环语句/命名函数

    for(1.表达式1;2.表达式2;3.表达式3){ 4.循环体语句; } 先执行1,在执行2表达式,如果2的表达式为false的话直接退出循环, 如果2的表达式结果为true,执行4,执行3,执行2 ...

  3. harbor在谷歌云上搭建 日志

    参考:https://github.com/vmware/harbor/blob/master/docs/installation_guide.md 日志: [root@instance-1 harb ...

  4. SUSE12Sp3-MongoDB安装

    1.解压 sudo mkdir /usr/local/mongodb # 创建mongodb目录 将mongodb-linux-x86_64-suse12-4.0.6.tgz复制到/usr/local ...

  5. [Swift]LeetCode46. 全排列 | Permutations

    Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...

  6. [Swift]LeetCode500. 键盘行 | Keyboard Row

    Given a List of words, return the words that can be typed using letters of alphabet on only one row' ...

  7. [Swift]LeetCode523. 连续的子数组和 | Continuous Subarray Sum

    Given a list of non-negative numbers and a target integer k, write a function to check if the array ...

  8. [Swift]LeetCode819. 最常见的单词 | Most Common Word

    Given a paragraph and a list of banned words, return the most frequent word that is not in the list ...

  9. [Swift]LeetCode951. 翻转等价二叉树 | Flip Equivalent Binary Trees

    For a binary tree T, we can define a flip operation as follows: choose any node, and swap the left a ...

  10. ubuntu中环境变量的几个问题思考

    问题一:export PATH=$PATH:/usr/local和export PATH=/usr/local:$PATH这两个的区别是什么?可以随便用吗? 这两个都是要把该目录加到环境变量中,一般的 ...