Est-il possible d'utiliser jQuery .on et hover?

J'en ai un <ul>qui est rempli de javascript après le chargement initial de la page. J'utilise actuellement .bindavec mouseoveret mouseout.

Le projet vient d'être mis à jour vers jQuery 1.7, j'ai donc la possibilité de l'utiliser .on, mais je n'arrive pas à le faire fonctionner hover. Est-il possible d'utiliser .onavec hover?

EDIT : Les éléments auxquels je suis lié sont chargés avec javascript après le chargement du document. C'est pourquoi j'utilise onet pas seulement hover.

( Regardez la dernière modification de cette réponse si vous devez utiliser .on()des éléments remplis de JavaScript )

Utilisez ceci pour les éléments qui ne sont pas remplis en utilisant JavaScript:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()a son propre gestionnaire: http://api.jquery.com/hover/

Si vous voulez faire plusieurs choses, enchaînez-les dans le .on()gestionnaire comme ceci:

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

Selon les réponses fournies ci-dessous, vous pouvez utiliser hoveravec .on(), mais:

Bien que fortement déconseillé pour le nouveau code, vous pouvez voir le pseudo-événement-nom "hover" 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 confondez pas le pseudo-événement-nom "hover" avec la méthode .hover (), qui accepte une ou deux fonctions.

En outre, il n'y a aucun avantage en termes de performances à l'utiliser et c'est plus volumineux que d'utiliser simplement mouseenterou mouseleave. La réponse que j'ai fournie nécessite moins de code et est la bonne façon de réaliser quelque chose comme ça.

ÉDITER

Cela fait un moment que cette question n'a pas reçu de réponse et elle semble avoir gagné du terrain. Le code ci-dessus existe toujours, mais je voulais ajouter quelque chose à ma réponse d'origine.

Bien que je préfère utiliser mouseenteret mouseleave(m'aide à comprendre ce qui se passe dans le code) avec, .on()cela revient à écrire ce qui suit avechover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

Étant donné que la question initiale a demandé comment ils pouvaient utiliser correctement on()avec hover(), je pensais que je corrigerais l'utilisation de on()et n'a pas trouvé nécessaire d'ajouter le hover()code au moment.

MODIFIER LE 11 DÉCEMBRE 2012

Certaines nouvelles réponses fournies ci-dessous expliquent comment cela .on()devrait fonctionner si la divquestion en question est remplie à l'aide de JavaScript. Par exemple, supposons que vous remplissiez un événement divutilisant jQuery .load(), comme ceci:

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

Le code ci-dessus pour .on()ne tiendrait pas. Au lieu de cela, vous devez modifier légèrement votre code, comme ceci:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

Ce code fonctionnera pour un élément rempli de JavaScript après qu'un .load()événement s'est produit. Remplacez simplement votre argument par le sélecteur approprié.

Aucune de ces solutions n'a fonctionné pour moi lors du survol des objets créés après le chargement du document en tant que demande de question. Je sais que cette question est ancienne mais j'ai une solution pour ceux qui cherchent toujours:

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

Cela liera les fonctions au sélecteur afin que les objets avec ce sélecteur créés après que le document soit prêt pourront toujours l'appeler.

Je ne sais pas à quoi ressemble le reste de votre Javascript, donc je ne pourrai pas dire s'il y a une interférence. Mais .hover()fonctionne très bien comme un événement avec .on().

$("#foo").on("hover", function() {
  // disco
});

Si vous voulez pouvoir utiliser ses événements, utilisez l'objet retourné de l'événement:

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

La fonction de survol de jQuery offre des fonctionnalités de survol et de sortie de souris.

$ (sélecteur) .hover (inFunction, outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

Source: http://www.w3schools.com/jquery/event_hover.asp

Je viens de surfer sur le Web et j'ai senti que je pouvais contribuer. J'ai remarqué qu'avec le code ci-dessus publié par @calethebrewer peut entraîner plusieurs appels sur le sélecteur et un comportement inattendu par exemple: -

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

Ce violon http://jsfiddle.net/TWskH/12/ illustre mon propos. Lors de l'animation d'éléments tels que des plugins, j'ai constaté que ces déclencheurs multiples entraînent un comportement involontaire qui peut entraîner l'animation ou le code appelé plus qu'il n'est nécessaire.

Ma suggestion est de simplement remplacer par mouseenter / mouseleave: -

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

Bien que cela ait empêché d'appeler plusieurs instances de mon animation, j'ai finalement opté pour le survol de la souris / souris car je devais déterminer quand les enfants du parent étaient survolés.

Vous pouvez l'utiliser .on()avec hoverce que dit la section Notes supplémentaires:

Bien que fortement déconseillé pour le nouveau code, vous pouvez voir le pseudo-événement-nom "hover" 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 confondez pas le pseudo-événement-nom "hover" avec la méthode .hover (), qui accepte une ou deux fonctions.

Ce serait de faire ce qui suit:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

EDIT (note pour les utilisateurs de jQuery 1.8+):

Déconseillé dans jQuery 1.8, supprimé dans 1.9: Le nom "hover" 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 confondez pas le pseudo-événement-nom "hover" avec la méthode .hover (), qui accepte une ou deux fonctions.

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

Vous pouvez fournir un ou plusieurs types d'événements séparés par un espace.

Donc, c'est hoverégal mouseenter mouseleave.

Voici ma suggestion:

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Si vous en avez besoin comme condition dans un autre événement, je l'ai résolu de cette façon:

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

Ensuite, dans un autre événement, vous pouvez facilement l'utiliser:

 if ($(this).data('hover')){
      //...
 }

(J'en vois certains utiliser is(':hover')pour résoudre ce problème. Mais ce n'est pas (encore) un sélecteur jQuery valide et ne fonctionne pas dans tous les navigateurs compatibles)

Le plugin jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html va beaucoup plus loin que les approches naïves répertoriées ici. Bien qu'ils fonctionnent certainement, ils ne se comportent pas nécessairement comme les utilisateurs les attendent.

La principale raison d'utiliser hoverIntent est la fonction de délai d' expiration . Cela vous permet de faire des choses comme empêcher un menu de se fermer parce qu'un utilisateur fait glisser sa souris légèrement trop loin vers la droite ou la gauche avant de cliquer sur l'élément qu'il souhaite. Il fournit également des capacités pour ne pas activer les événements de vol stationnaire dans un barrage et attend le vol stationnaire concentré.

Exemple d'utilisation:

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

De plus amples explications sont disponibles sur https://stackoverflow.com/a/1089381/37055