jQuery hover странная ошибка

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 функциональность всех текущих и будущих элементов, как это:

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

Ссылка: http://api.jquery.com/on/

hover является эквивалентно mouseenter и mouseleave, поэтому hover нельзя использовать напрямую с on. Немного тяжело добавить обе функции для зависания, поэтому предпочтительно использовать mouseenter и mouseleave отдельно.

Причина, по которой я использую $('#project').on, является производительностью. jQuery должен искать весь DOM дерево ищет .projectinfo узлов каждый раз, когда вы что-то создаете, так что это сделает jQuery только под #project. Намного быстрее.

Answer 2

Тогда вам нужно попробовать это:

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