jQuery class seldness

Question

J'utilise jQuery pour changer l'image d'arrière-plan d'un bouton en fonction de la classe qui lui est associée en survol. Cela ne fonctionne que si je mets les instructions hover dans des fonctions séparées, cependant. Pourquoi est-ce?

Voici le code NON fonctionnant, qui évalue toujours l'instruction .submit hover, même lorsque cette classe est supprimée via l'événement keyup.

$(function() { 
    { 

$('.submit-getinfo').hover(function() 
{ 
    $(this).css({backgroundPosition: "right bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "right top"}); 
    //$(this).removeClass('submithover'); 

}); 

$('.submit').hover(function() 
{ 
    $(this).css({backgroundPosition: "left bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "left top"}); 
    //$(this).removeClass('submithover'); 

}); 

    }}); 

Code de travail:

$(function() { 
    { 


$('.submit').hover(function() 
{ 
    $(this).css({backgroundPosition: "left bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "left top"}); 
    //$(this).removeClass('submithover'); 

}); 
    }}); 

    $('#test').bind('keyup', function() { 

    if (url == 'devel') { 
    $("#submit").addClass("submit-getinfo").removeClass("submit"); 

$('.submit-getinfo').hover(function() 
{ 
    $(this).css({backgroundPosition: "right bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "right top"}); 
//$(this).removeClass('submithover'); 

}); 
    } }); 

Je ne juste pour voir pourquoi je dois mettre les déclarations de vol stationnaire dans des fonctions distinctes, au lieu de coller à la fois dans la principale DOM.

Answer 1

Vous devez réorganiser votre code un peu en utilisant .live(), comme ceci:

$(function() { 
    $('.submit-getinfo').live('mouseenter', function() { 
     $(this).css({backgroundPosition: "right bottom"}); 
    }).live('mouseleave' function() { 
     $(this).css({backgroundPosition: "right top"}); 
    }); 

    $('.submit').live('mouseenter', function() { 
     $(this).css({backgroundPosition: "left bottom"}); 
    }).live('mouseleave', function() { 
     $(this).css({backgroundPosition: "left top"}); 
    }); 
}); 

il est actuellement dire « trouver des éléments avec cette classe, se lient cette fonction de vol stationnaire à ceux », maintenant il doesn Peu importe que vous changiez la classe, car la fonction est déjà liée aux événements jQuery mouseenter et mouseleave de cet élément ... même s'il s'agit de changements de classe, ce qui n'est pas le cas.

Avec .live() Cependant, le gestionnaire d'événements est pas lié à l'élément lui-même, il est lié à la document, en attendant les mouseenter et mouseleave événements à bouillonner, il évalue si l'élément qui provoque les événements correspondant au sélecteur droite maintenant, et exécute si c'est le cas ... donc si vous changez la classe sera importe, ont un sens?