Forum : Probleme d'actualisation de hover

Bonjour,
Voici mon petit probleme j'ai fait un exemple tout simple afin de mieux pouvoir l'expliquer.
En gros j'ai un titre H1 quand je passe m'a sourie dessus j'ai un hover qui change la couleur en rouge.
Quand je clique sur un span ça ajoute en jquery une balise h1 mais par contre le hover ne fonctionne pas sur cette nouvelle balise.
Avez vous une explication ?
Merci d'avance

Voici mon code HTML

<html lang="en">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="js/test.js"></script>
    <body>
        <h1 class="h1_test">test de couleur</h1>
        <span class="span_test">fait un click pour rajouer un h1</span>
    </body>
</html>

Voici mon code Jquery

$(document).ready(function() {
  //change la couleur lors d'un hover
    $(".h1_test").hover( 
        function() {
          $(this).css('color','red');
        }, function() {
          $(this).css('color','black'); //reviens en noir
        }
    );
    //ajoute une balise h1
    $(".span_test").click( 
        function() {
          $(this).after('<h1 class="h1_test">test de couleur</h1>');
        }
    );

});

shinix

Réponse acceptée

Yop tu peux le faire comme ça :

exemple mis sur jsfiddle : http://jsfiddle.net/wjertgod/


$(document).ready(function(){
    initialise();
    click_span();
});
function initialise(){
  //change la couleur lors d'un hover
    $(".h1_test").hover( 
        function() {
          $(this).css('color','red');
        }, function() {
          $(this).css('color','black'); //reviens en noir
        }
    );
};
//ajoute une balise h1
function click_span(){
$('.span_test').on('click', function(){
$(this).after('<h1 class="h1_test">test de couleur</h1>');
    initialise();
});
}

Benjamin Derepas

Il n'est pas nescessaire de passer par du js pour afficher l'effet de couleur :

css

.h1_test{
  color:#000;
}
.h1_test:hover{
  color:red;
}

$(".span_test").click(function(){
    $(this).after('<h1 class="h1_test">test de couleur</h1>');
});

stalker069

Auteur

je le sais bien, mais justement comme je l'ai dit j'ai fait un exemple simple!
J'ai un code bien plus complexe mais mon probleme peux etre expliqué de cette maniere et je pense que c'est bien plus simple pour vous de le comprendre que de sortir tout mon projet!
(en gros l'utilisateur rentre un texte en BDD dans ce texte il y a un popup mon scritp l'insert en BDD et l'affiche dynamiquement en js sans recharger la page et mon hover sur cette popup ne marche pas alors que si je reload la page j'utilise le code en base et non celui rajouté par le js et ça marche. Tu vois c'est un peux plus complexe mais en gros l'idée est dans mon exemple ^^)

Merci pour ta réponse rapide meme si elle ne correspond pas vraiment ;-)

Probleme d'actualisation de hover

3 réponses