jQuery hover étrange bug

Question

J'ai un petit problème avec mon vol stationnaire jQuery. Je fais ma page personnelle et je charge mes données depuis AJAX. Donc, je ne peux pas comprendre pourquoi le vol stationnaire. D'abord, je TOUGH c'était parce que mon élément était avec position: absolute, mais j'édita et fait il div.Here normal est mon code:

<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"); 
    } 
); 

Cela peut-il parce que cela est sur un élément qui n'est pas sur la page lors du chargement de la page. Je charge l'élément plus tard avec AJAX?

Answer 1

Vous pouvez joindre mouseenter et mouseleave fonctionnalité sur tous les éléments actuels et futurs comme celui-ci:

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

Référence: http://api.jquery.com/on/

hover est équivalent à mouseenter et mouseleave, donc hover ne peut pas être utilisé directement avec on. Il est un peu lourd d'ajouter les deux fonctionnalités de vol stationnaire, donc il est préférable d'utiliser mouseenter et mouseleave séparément.

La raison pour laquelle j'utilise $('#project').on est pour la performance. jQuery doit rechercher l'arbre DOM entier à la recherche de noeuds .projectinfo chaque fois que vous créez quelque chose, ce qui fera que jQuery ne regardera que sous #project à la place. Plus vite.

Answer 2

Ensuite, vous devez essayer ceci:

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