Ist es möglich, jQuery .on und hover zu verwenden?

Question

Ich habe eine <ul> die nach dem ersten Laden der Seite mit Javascript gefüllt wird. Ich verwende derzeit .bind mit mouseover と mouseout .

Das Projekt hat gerade auf jQuery 1.7 aktualisiert, so dass ich die Möglichkeit habe, zu verwenden .on aber ich scheine es nicht zum Funktionieren zu bringen mit hover . Ist es möglich, Folgendes zu verwenden .on mit hover ?

EDIT : Die Elemente, an die ich gebunden bin, werden mit Javascript geladen, nachdem das Dokument geladen wurde. Deshalb benutze ich on und nicht nur hover .

Answer 1

( Sehen Sie sich die letzte Änderung in dieser Antwort an, wenn Sie die .on() mit Elementen, die mit JavaScript gefüllt sind )

Verwenden Sie dies für Elemente, die nicht mit JavaScript ausgefüllt werden:

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

.hover() hat seinen eigenen Handler: http://api.jquery.com/hover/

Wenn Sie mehrere Dinge tun wollen, verketten Sie sie in der .on() Handler wie folgt:

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

Entsprechend den nachstehenden Antworten können Sie Folgendes verwenden hover mit .on() , sondern:

Obwohl bei neuem Code dringend davon abgeraten wird, können Sie die Pseudo-Ereignis-Name "hover" als Abkürzung für die Zeichenfolge "Maus eingeben Maus verlassen". Es wird ein einziger Event-Handler für diese zwei Ereignisse an, und der Handler muss event.type untersuchen, um festzustellen um festzustellen, ob das Ereignis "mouseenter" oder "mouseleave" ist. Verwechseln Sie nicht das Pseudo-Ereignisnamen "hover" nicht mit der Methode .hover(), die eine oder zwei Funktionen akzeptiert.

Außerdem gibt es keine Leistungsvorteile, und es ist sperriger als die Verwendung von mouseenter または mouseleave . Die Antwort, die ich gegeben habe, erfordert weniger Code und ist der richtige Weg, um etwas wie dies zu erreichen.

EDIT

Es ist schon eine Weile her, dass diese Frage beantwortet wurde, und es scheint, als hätte sie an Boden gewonnen. Der obige Code steht immer noch, aber ich wollte etwas zu meiner ursprünglichen Antwort hinzufügen.

Ich bevorzuge zwar die Verwendung von mouseenter と mouseleave (hilft mir zu verstehen, was im Code vor sich geht) mit .on() ist es genau dasselbe, als wenn Sie folgendes mit hover()

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

Da in der ursprünglichen Frage gefragt wurde, wie sie die on() mit hover() dachte ich, ich würde die Verwendung von on() und hielt es nicht für notwendig, die hover() Code zu dieser Zeit.

BEARBEITEN 11. DEZEMBER 2012

Nachfolgend einige neue Antworten, die erläutern, wie .on() sollte funktionieren, wenn die div wird mit JavaScript ausgefüllt. Nehmen wir zum Beispiel an, Sie füllen eine div mit jQuery's .load() Ereignis, etwa so:

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

Der obige Code für .on() nicht standhalten würde. Stattdessen sollten Sie Ihren Code leicht abändern, etwa so:

$(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

Dieser Code funktioniert für ein Element, das mit JavaScript nach einer .load() Ereignis stattgefunden hat. Ändern Sie einfach Ihr Argument in den entsprechenden Selektor.

Answer 2

Keine dieser Lösungen funktionierte bei mir, wenn ich mit der Maus über/aus Objekte fuhr, die nach dem Laden des Dokuments erstellt wurden, wie in der Frage gefordert. Ich weiß, diese Frage ist alt, aber ich habe eine Lösung für diejenigen, die noch suchen:

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

Dadurch werden die Funktionen an den Selektor gebunden, so dass Objekte mit diesem Selektor, die nach der Fertigstellung des Dokuments erstellt werden, die Funktionen weiterhin aufrufen können.

Answer 3

Ich bin mir nicht sicher, wie der Rest Ihres Javascript aussieht, daher kann ich nicht sagen, ob es zu Störungen kommt. Aber .hover() funktioniert problemlos als Ereignis mit .on() .

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

Wenn Sie die Ereignisse nutzen möchten, verwenden Sie das vom Ereignis zurückgegebene Objekt:

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

Ich bin gerade aus dem Internet hereingesurft und dachte, ich könnte einen Beitrag leisten. Ich bemerkte, dass mit dem obigen Code von @calethebrewer gepostet kann in mehreren Aufrufen über den Selektor und unerwartetes Verhalten zum Beispiel führen: -

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

Diese Fiedel http://jsfiddle.net/TWskH/12/ veranschaulicht meinen Standpunkt. Bei der Animation von Elementen, z. B. in Plugins, habe ich festgestellt, dass diese mehrfachen Auslöser zu unbeabsichtigtem Verhalten führen, was dazu führen kann, dass die Animation oder der Code öfter als nötig aufgerufen wird.

Ich schlage vor, einfach durch mouseenter/mouseleave zu ersetzen: -

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

Obwohl dies verhindert mehrere Instanzen meiner Animation aus aufgerufen werden, ging ich schließlich mit Mouseover/Mouseleave, wie ich brauchte, um zu bestimmen, wenn Kinder des übergeordneten wurden über schwebte.

Answer 5

Die jQuery-Hover-Funktion bietet Mouseover- und Mouseout-Funktionen.

$(selector).hover(inFunction,outFunction);

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

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