今天項目中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事件。詳細的信息請移步：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'); });

這樣的話就能實現鼠標的事件了！

?

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的事件绑定on与hover事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。