今天項(xiàng)目中UI設(shè)計(jì)了一個(gè)鼠標(biāo)劃入和劃出的效果，本來這個(gè)小效果是非常簡(jiǎn)單的！可是在實(shí)際的生產(chǎn)環(huán)境中就出現(xiàn)了一點(diǎn)點(diǎn)問題！因?yàn)樵趯?shí)際的環(huán)境中，數(shù)據(jù)全部是用ajax異步加載進(jìn)去的，這樣就造成了hover方法不能用了。先看一下原來的代碼：

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

原理也非常簡(jiǎn)單，就是在鼠標(biāo)進(jìn)入的時(shí)候，給這個(gè)Li加入hover的類名，然后鼠標(biāo)劃出的時(shí)候刪除這個(gè)類名。非常簡(jiǎn)單的小效果。ajax異步加載我們就要用時(shí)間綁定了，把這個(gè)事件綁定在他們的父元素ul上（li是動(dòng)態(tài)異步添加的），于是有了下面的代碼：

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

后來發(fā)現(xiàn)并不能行啊！！！想想也是啊，為什么第三個(gè)參數(shù)！

　　這里就要復(fù)習(xí)一下on的用法了，我們這里用的on事件其實(shí)是原來的delegate事件。詳細(xì)的信息請(qǐng)移步：http://www.runoob.com/jquery/event-on.html，delegate中第二個(gè)參數(shù)也就是咱們寫的Li是必須的，不能缺少。如果不懂得話可以百度，也可以查看下面的鏈接http://www.jb51.net/article/46224.htm?而且我還發(fā)現(xiàn)，hover是jQuery自己封裝的函數(shù)，并不是javascript的函數(shù)，并且

jQuery 1.7 版本前該方法觸發(fā)?mouseenter?和?mouseleave?事件。

jQuery 1.8 版本后該方法觸發(fā)?mouseover?和?mouseout?事件。

也就是說hover時(shí)間在不同的jq版本中是不一樣的，mouseenter是沒有冒泡事件的，而mouseover會(huì)發(fā)生冒泡時(shí)間，mouseleave和mouseout一樣。具體情況請(qǐng)看下面的小實(shí)驗(yàn)：http://www.runoob.com/try/try.php?filename=tryjquery_event_mouseenter_mouseover?相信看了這個(gè)后就非常清楚了。

　　回到咱們的問題，如果想給異步加載的Li加載上鼠標(biāo)劃入和劃出事件，那就只能自己綁定兩個(gè)事件了！

$('ul').on('mouseenter', 'li', function() {//綁定鼠標(biāo)進(jìn)入事件$(this).addClass('hover'); }); $('ul').on('mouseleave', 'li', function() {//綁定鼠標(biāo)劃出事件$(this).removeClass('hover'); });

這樣的話就能實(shí)現(xiàn)鼠標(biāo)的事件了！

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。