Problèmes avec la méthode .prepend dans jQuery

Question

J'ai une fonction qui prépointe une balise li à un div parent... Cependant, après le prépli, je veux agir sur cet élément de liste préplié en changeant les propriétés css lorsqu'il est survolé mais le sélecteur jQuery ne le trouve pas (apparemment parce que la fonction .hover recherche les éléments de liste disponibles pour agir lorsque la page se charge... et les éléments prépliqués sont inexistants lorsque la page se charge).

Mon code prepend ressemble à ceci :

$("div#content-text div#sub-text").prepend(
"<li id='item1' class='contents-rec'><div class='text'></div></li>");

alors que mon code de survol (qui ne fonctionne pas) ressemble à ceci :

$("div#content-text div#sub-text li.contents-rec").hover(function(){
$(this).css({border:'1px solid #fff'});
}, function(){
$(this).css({border:''});
},0);

toute aide serait grandement appréciée ! merci d'avance

Answer 1

Si vous insérez dynamiquement un élément après que l'événement de survol a déjà été attribué lors du chargement de la page, vous pouvez utiliser la fonction live() dans cette situation (jQuery 1.4.1 ou supérieur est requis pour le paramètre "hover") :

$("div#content-text div#sub-text li.contents-rec").live('hover',
    function(event) { 
        if (event.type == 'mouseover') {
            $(this).css({border:'10px solid orange'}); 
        } else {
            $(this).css({border:''}); 
        }
});

Answer 2

Est-ce que vous exécutez cette ligne...

$("div#content-text div#sub-text li.contents-rec").hover(function(){ $(this).css({border:'1px solid #fff'}); }, function(){ $(this).css({border:''}); },0);

Après celui-ci...

$("div#content-text div#sub-text").prepend( "");

Si c'est le cas, il devrait être là.

Consultez également la méthode live(). aquí

Answer 3

Le code que vous montrez ne précède rien, je suppose donc que vous l'avez simplement laissé de côté pour faciliter l'affichage. (Nous pouvons vous aider beaucoup mieux si vous postez le code réel de travail, cependant).

Ensuite, assurez-vous que votre code de survol s'exécute après le code de préparation. Si ce n'est pas le cas, vous devrez ajuster les choses d'une manière ou d'une autre. (Peut-être avec setTimeout(...).)

La fonction live() de JQuery pourrait être utile, mais la version 1.3.x ne prend pas en charge la fonction "hover" dans la liaison live().