JS绑定.on的hover事件

今天项目中UI设计了一个鼠标划入和划出的效果，原本这个小效果是很是简单的！但是在实际的生产环境中就出现了一点点问题！由于在实际的环境中，数据所有是用ajax异步加载进去的，这样就形成了hover方法不能用了。先看一下原来的代码：

1 $('ul li').hover(function(){
2     $(this).addClass('hover');
3 },function(){
4     $(this).removeClass('hover');
5 })复制代码

原理也很是简单，就是在鼠标进入的时候，给这个Li加入hover的类名，而后鼠标划出的时候删除这个类名。很是简单的小效果。ajax异步加载咱们就要用时间绑定了，把这个事件绑定在他们的父元素ul上（li是动态异步添加的），因而有了下面的代码：

1 $('ul').on('hover','li',function(){
2     $(this).addClass('hover');
3 },function(){
4     $(this).removeClass('hover');
5 })复制代码

后来发现并不能行啊！！！想一想也是啊，为何第三个参数！

　　这里就要复习一下on的用法了，咱们这里用的on事件实际上是原来的delegate事件。详细的信息请移步：www.runoob.com/jquery/even…，delegate中第二个参数也就是我们写的Li是必须的，不能缺乏。若是不懂得话能够百度，也能够查看下面的连接www.jb51.net/article/462… 并且我还发现，hover是jQuery本身封装的函数，并非javascript的函数，而且

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

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

也就是说hover时间在不一样的jq版本中是不同的，mouseenter是没有冒泡事件的，而mouseover会发生冒泡时间，mouseleave和mouseout同样。具体状况请看下面的小实验：www.runoob.com/try/try.php… 相信看了这个后就很是清楚了。

　　回到我们的问题，若是想给异步加载的Li加载上鼠标划入和划出事件，那就只能本身绑定两个事件了！

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

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