jQuery懸停奇怪的bug

Question

我有我的jQuery懸停小問題。我做我的個人頁面，我從AJAX加載我的數據。所以我不知道爲什麼懸停是竊聽。首先，我強硬，那是因爲我的元素是與位置是：絕對的，但後來我編輯它，並使它正常div.Here是我的代碼：

<td id="project" style="background: url('img/pctutorials-bg.png');background-repeat:no-repeat;background-position:center center;vertical-align:bottom;" > 
<div class="projectinfo" > 
<div class="text" >PCTutorials-BG</div> 
</div> 
</td> 

jQuery的

$(".projectinfo").hover(
    function() { 
    alert("Inside"); 
    }, 
    function() { 
    alert("Outside"); 
    } 
); 

可以這樣，因爲這是在頁面加載時不在頁面上的元素上。我以後用AJAX加載元素？

Answer 1

您可以在當前和未來所有的元素像這樣重視mouseenter和mouseleave功能相當於mouseenter和mouseleave，所以hover不能直接與on一起使用。添加兩種功能懸停有點重要，所以最好分別使用mouseenter和mouseleave。

我使用$('#project').on的原因是因爲性能。 jQuery必須搜索整個 DOM樹，每次創建內容時都會尋找.projectinfo節點，所以這會使jQuery只能在#project下查找。快多了。

Answer 2

然後，你需要試試這個：

$(function() { 
    $('#project').on('mouseenter', '.projectinfo', function() { 
    alert("Inside"); 
    }).on('mouseleave', '.projectinfo', function() { 
    alert("Outside"); 
    }); 
); 

參考：http://api.jquery.com/on/

hover是

$(document).on('mouseenter', '.projectinfo', function() { 
    alert("Inside"); 
}).on('mouseleave', '.projectinfo', function() { 
    alert("Outside"); 
});