Est-il possible d'utiliser jQuery .sur et passez?

Question

J'ai un <ul> qui est rempli avec javascript après le chargement initial de la page. Je suis actuellement en utilisant .bind avec mouseover et mouseout.

Le projet de la mise à jour de jQuery 1.7 j'ai donc la possibilité d'utiliser .on, mais je n'arrive pas à le faire fonctionner avec hover. Est-il possible d'utiliser .on avec hover?

EDIT: Les éléments de je suis de liaison sont chargés avec du javascript après le document se charge. C'est pourquoi je suis à l'aide d' on , et pas seulement hover.

Answer 1

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

À utiliser pour des éléments qui ne sont pas remplis à l'aide de JavaScript:

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

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

Si vous voulez faire plusieurs choses en chaîne, dans l' .on() gestionnaire de la sorte:

$(".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 hover avec .on(), mais:

Bien que fortement déconseillé pour le nouveau code, vous pouvez voir l' pseudo-événement-nom "hover" qui est utilisé comme un raccourci pour la chaîne "mouseenter mouseleave". Il s'attache un seul gestionnaire d'événements pour ceux deux événements, et le gestionnaire doit examiner événement.type afin de déterminer si l'événement est mouseenter ou mouseleave. Ne pas confondre l' "vol plané" pseudo-événement-nom avec la .hover (), qui accepte un ou deux fonctions.

Aussi, il n'y a pas les avantages de performance à utiliser et il est plus volumineux que simplement en utilisant mouseenter ou mouseleave. La réponse que j'ai fournie nécessite moins de code et est le bon moyen de parvenir à quelque chose comme ça.

MODIFIER

Il a été un moment depuis que cette question a été répondu et il semble avoir acquis une certaine traction. Le code ci-dessus est toujours debout, mais je voulais ajouter quelque chose à ma réponse originale à cette question.

Alors, je préfère utiliser l' mouseenter et mouseleave (aide-moi à comprendre ce qui se passe dans le code) avec .on() , c'est juste le même que l'écriture de la suite avec hover()

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

Depuis la première question a se demander comment ils pourraient utiliser correctement on() avec hover(), j'ai pensé que je voudrais corriger l'utilisation de l' on() et n'a pas trouvé nécessaire d'ajouter l' hover() code à l'époque.

MODIFIER DÉCEMBRE 11, 2012

Quelques nouvelles réponses fournies ci-dessous le détail comment l' .on() devrait fonctionner si l' div en question est renseignée à l'aide de JavaScript. Par exemple, disons que vous remplissez un div à l'aide de jQuery .load() événement, comme suit:

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

Le code ci-dessus pour .on() n'en serait pas. Au lieu de cela, vous devez modifier votre code légèrement, 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 fonctionne pour un élément rempli avec JavaScript après un .load() événement qui s'est passé. Il suffit de changer votre argument à la appropriée de sélection.

Answer 2

Aucune de ces solutions n'a fonctionné pour moi lorsque le pointeur de la souris au-dessus de/des objets créés après le document est chargé que de la question des demandes. Je sais que cette question est vieux, mais j'ai une solution pour ceux qui sont encore à la recherche:

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

Cela aura pour effet de lier les fonctions du sélecteur de sorte que les objets avec le sélecteur faite après que le document est prêt va encore pouvoir l'appeler.

Answer 3

Je ne suis pas sûr de ce que le reste de votre Javascript ressemble, donc je ne serai pas en mesure de dire si il n'y a aucune interférence. Mais .hover() fonctionne très bien comme un événement avec .on().

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

Si vous voulez être en mesure d'utiliser ses événements, l'utilisation de l'objet renvoyé 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/

Answer 4

$("#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');

Answer 5

Vous pouvez-vous utiliser .on() avec hover par faire ce que les autres Notes de la section dit:

Bien que fortement déconseillé pour le nouveau code, vous pouvez voir l' pseudo-événement-nom "hover" qui est utilisé comme un raccourci pour la chaîne "mouseenter mouseleave". Il s'attache un seul gestionnaire d'événements pour ceux deux événements, et le gestionnaire doit examiner événement.type afin de déterminer si l'événement est mouseenter ou mouseleave. Ne pas confondre l' "vol plané" pseudo-événement-nom avec la .hover (), qui accepte un ou deux fonctions.

Que serait la suivante:

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

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

});

---

EDIT (note pour jQuery 1.8+ utilisateurs):

Déconseillé dans jQuery 1.8, enlevé en 1.9: Le nom de "hover" qui est utilisé comme un le raccourci de la chaîne "mouseenter mouseleave". Il s'attache un seul gestionnaire d'événements de ces deux événements, et le gestionnaire doit examiner de l'événement.type afin de déterminer si l'événement mouseenter ou mouseleave. Ne pas confondre le "hover" pseudo-événement-nom avec la .hover() la méthode, qui accepte une ou deux fonctions.