changer bg couleur sur hover, jquery

Question

J'ai ce morceau de code qui fonctionne très bien, mais dès que je rafraîchis un div sur ma page, le code se brise, et .item_control_box n'est plus caché, je pense avoir pour réécrire cela pour travailler avec .live, mais je ne sais pas comment.

$(document).ready(function() { 
    $(".item_control_box").hide(); 
    jQuery('.each_item_container').hover(function() { 
     jQuery(this).find('.item_control_box').show() 
    }, function() { 
     jQuery(this).find('.item_control_box').hide(); 
    }); 
}); 

Merci!

Answer 1

Êtes-vous rechargeons votre div dynamiquement via AJAX? Juste curieux. Voici ce que je vois:

Vous code actuel js fonctionnera lorsque le document est rendu

$(document).ready(function() { 
    $(".item_control_box").hide(); 

^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^

ce cachera tous les éléments actuels avec item_control_box de classe qui sont déjà présents

jQuery('.each_item_container').hover(function() { 
    jQuery(this).find('.item_control_box').show() 
}, function() { 
    jQuery(this).find('.item_control_box').hide(); 
}); 

^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^

Attachez le gestionnaire d'événements hover à tous les éléments CURRENT avec la classe each_item_container, puis recherchez les enfants de item_control_box dans hover.

});

Si vous chargez de nouvelles données dans votre div via AJAX ou une autre signifie que vous devez vous assurer deux choses:

1) éléments avec item_control_box ne sont pas affichés dans un premier temps. Cela vous pouvez accomplir avec style simple = "display: none;" 2) s'assurer que les événements hover sont assignés à .each_item_container. Cela vous devez faire via la méthode live jQuery ('. Each_item_container'). Live ('hover', function() ... décrit par @PeterStuart

Last but not least, ne sais pas quelle version jquery vous utilisez mais dans 1.7+ live() méthode est obsolète utiliser la méthode() à la place.Il est le lien pour la référence:

Answer 2

vous changeriez:

jQuery('.each_item_container').hover(function() { 

à

jQuery('.each_item_container').live('hover', function() { 

Pour répondre à votre commentaire ci-dessus votre HTML devrait juste être bien, aussi longtemps si vous avez une classe div appelé "each_item_container". Lorsque vous survolez est devrait maintenant changer la couleur de votre backreound :)

Laissez-moi savoir si ça ne marche pas :)