2013-03-01 5 views
0

C'est ce que j'ai:à l'aide de() avec vol stationnaire - jQuery

$('#blah').hover(function(){ 
    $('etc').show(); 
}, function(){ 
    $('etc').hide(); 
}); 

Cela fonctionne très bien, maintenant je veux le code exact ci-dessus travailler en temps réel avec méthode sur():

$('#blah').on('hover', function(){ 
    $('#etc').show(); 
}, function(){ 
    $('#etc').hide(); 
}); 

Mais cela ne fonctionne pas, quelqu'un sait pourquoi? mais aussi cela fonctionne:

$('#blah').on('hover', function(){ 
    $('#etc').show(); 
}); 

Lorsque j'utilise la méthode, la fonction de rappel() ne fonctionne pas, alors j'utilise mouseover() et mouseleave() avec le() et cela fonctionne, je voulais juste savoir pourquoi le rappel de vol stationnaire ne fonctionne pas avec le(), qui est si simple que d'utiliser 2 événements ....

Merci

Répondre

2

À partir du code source JQuery, hover ne figure pas dans la liste des événements qui ont déclenché menant à JQuery .on()

jQuery.each(("blur focus focusin focusout load resize scroll unload click dblclick " + 
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + 
    "change select submit keydown keypress keyup error contextmenu").split(" "), function(i, name) { 

    // Handle event binding 
    jQuery.fn[ name ] = function(data, fn) { 
     return arguments.length > 0 ? 
      this.on(name, null, data, fn) : 
      this.trigger(name); 
    }; 
}); 

C'est parce que .hover() est juste un raccourci pour JQuery .mouseenter() et .mouseleave()

jQuery.fn.hover = function(fnOver, fnOut) { 
    return this.mouseenter(fnOver).mouseleave(fnOut || fnOver); 
}; 

J'espère que cette brève explication fournit peu de conseils.

0

utilisation

jQuery.on("hover","#blah", function..) 

Ou vous pouvez utiliser bascule de fonction jQuery aussi

+3

quelle est la différence? vous lui passez un contexte. –

+0

ne fonctionne pas .... – behz4d

0

Oui, il ne fonctionnera pas parce que lorsque vous utilisez .on() avec hover alors événement hover juste avoir une fonction de rappel à la place, vous pouvez utiliser plusieurs événements .on()

Essayez

$("DOM").on({ 
    mouseenter: function() { 
     // Handle mouseenter... 
    }, 
    mouseleave: function() { 
     // Handle mouseleave... 
    } 
}); 
1

Utilisez mouseenter et mouseleave pour le vol stationnaire. Vérifiez en utilisant hover avec sur here.

$("#blah").on(
{ 
    mouseenter: function() 
    { 
     //stuff to do on mouseover 
    }, 
    mouseleave: function() 
    { 
     //stuff to do on mouseleave 
    } 
}); 

Utilisez bascule pour afficher/masquer,

$('#blah').on('hover', function(){ 
    $('#etc').toggle(); 
}); 
+0

pas pertinent, j'ai déjà trouvé une solution au problème, je voulais juste savoir pourquoi cela ne fonctionne pas, mais un bon point, merci – behz4d

+0

@ behz4d ça ne fonctionnait pas parce que lorsque vous utilisez hover en utilisant sur il n'a qu'un seul rappel voir ma réponse .. –

1

C'est parce que hover n'est pas vraiment un événement de navigateur, en fait juste un raccourci pour appeler

$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 

Utilisation avec le .on('hover') formulaire have been deprecated à partir de la version 1.8.

0

utilisation genouillère()

$('#blah').on('hover', function(){ 
    $('#etc').toggle(); 
}); 
3

de Jquery documents. Jquery on

OBSOLETE jQuery 1.8: Le nom "vol stationnaire" utilisé comme raccourci pour la chaîne "mouseenter mouseleave". Il attache un seul gestionnaire d'événements pour ces deux événements, et le gestionnaire doit examiner event.type à pour déterminer si l'événement est mouseenter ou mouseleave. Ne pas confondre le pseudo-événement-nom "hover" avec la méthode .hover(), qui accepte une ou deux fonctions.

$("div.test").on({ 
    mouseenter: function(){ 
    $(this).addClass("inside"); 
    }, 
    mouseleave: function(){ 
    $(this).removeClass("inside"); 
    } 
});