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

Ich habe eine <ul>, die nach dem ersten Laden der Seite mit Javascript gefüllt ist. Ich benutze derzeit .bindmit mouseoverund mouseout.

Das Projekt wurde gerade auf jQuery 1.7 aktualisiert, sodass ich die Option verwenden kann .on, aber ich kann es anscheinend nicht zum Laufen bringen hover. Ist es möglich , die Verwendung .onmit hover?

BEARBEITEN : Die Elemente, an die ich binde, werden nach dem Laden des Dokuments mit Javascript geladen. Deshalb benutze ich onund nicht nur hover.

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

Verwenden Sie dies für Elemente, die nicht mit JavaScript gefüllt sind:

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

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

Wenn Sie mehrere Dinge tun möchten, verketten Sie sie .on()wie folgt im Handler:

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

Entsprechend den unten angegebenen Antworten können Sie hovermit verwenden .on(), aber:

Obwohl von neuem Code dringend abgeraten wird, wird möglicherweise der Pseudoereignisname "hover" als Abkürzung für die Zeichenfolge "mouseenter mouseleave" verwendet. Es wird ein einzelner Ereignishandler für diese beiden Ereignisse angehängt, und der Handler muss event.type untersuchen, um festzustellen, ob das Ereignis mouseenter oder mouseleave ist. Verwechseln Sie den Pseudoereignisnamen "hover" nicht mit der Methode .hover (), die eine oder zwei Funktionen akzeptiert.

Es gibt auch keine Leistungsvorteile bei der Verwendung und es ist sperriger als nur die Verwendung von mouseenteroder mouseleave. Die Antwort, die ich gegeben habe, erfordert weniger Code und ist der richtige Weg, um so etwas zu erreichen.

BEARBEITEN

Es ist schon eine Weile her, dass diese Frage beantwortet wurde und sie scheint etwas an Zugkraft gewonnen zu haben. Der obige Code steht noch, aber ich wollte meiner ursprünglichen Antwort etwas hinzufügen.

Während ich es vorziehe, mouseenterund mouseleave(hilft mir zu verstehen, was im Code vor sich geht) zu verwenden .on(), ist es genauso, wie das Folgende mit zu schreibenhover()

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

Da die ursprüngliche Frage war , wie sie richtig nutzen könnten on()mit hover(), dachte ich , ich würde die Nutzung korrigieren on()und fand es nicht notwendig , den hinzufügen hover()Code zu der Zeit.

EDIT 11. DEZEMBER 2012

Im Folgenden finden Sie einige neue Antworten, die erläutern, wie funktionieren .on()soll, wenn die divbetreffende Antwort mit JavaScript ausgefüllt wird. Angenommen, Sie divfüllen ein .load()Ereignis mit jQuery wie folgt aus:

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

Der obige Code für .on()würde nicht stehen. Stattdessen sollten Sie Ihren Code wie folgt leicht ändern:

$(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 nach einem .load()Ereignis mit JavaScript gefüllt ist. Ändern Sie einfach Ihr Argument in den entsprechenden Selektor.

Keine dieser Lösungen hat bei mir funktioniert, wenn Sie mit der Maus über Objekte gefahren sind, die erstellt wurden, nachdem das Dokument geladen wurde, wie es die Frage erfordert. Ich weiß, dass diese Frage alt ist, 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, sodass Objekte, die mit diesem Selektor erstellt wurden, nachdem das Dokument fertig ist, es weiterhin aufrufen können.

Ich bin mir nicht sicher, wie der Rest Ihres Javascript aussieht, daher kann ich nicht feststellen, ob es Störungen gibt. Funktioniert aber .hover()gut als Event mit .on().

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

Wenn Sie seine 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/

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

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

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

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

Ich bin gerade aus dem Internet gesurft und hatte das Gefühl, ich könnte dazu beitragen. Ich habe festgestellt, dass der von @calethebrewer gepostete Code zu mehreren Aufrufen über den Selektor und unerwartetem Verhalten führen kann, zum Beispiel:

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

Diese Geige http://jsfiddle.net/TWskH/12/ illustriert meinen Standpunkt. Beim Animieren von Elementen wie in Plugins habe ich festgestellt, dass diese mehrfachen Trigger zu unbeabsichtigtem Verhalten führen, was dazu führen kann, dass die Animation oder der Code mehr als erforderlich aufgerufen wird.

Mein Vorschlag ist, einfach durch mouseenter / mouseleave zu ersetzen: -

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

Obwohl dies verhinderte, dass mehrere Instanzen meiner Animation aufgerufen wurden, entschied ich mich schließlich für Mouseover / Mouseleave, um festzustellen, wann Kinder des Elternteils über den Mauszeiger schwebten.

Sie können .on()mit verwenden, hoverindem Sie die folgenden Schritte ausführen:

Obwohl von neuem Code dringend abgeraten wird, wird möglicherweise der Pseudoereignisname "hover" als Abkürzung für die Zeichenfolge "mouseenter mouseleave" verwendet. Es wird ein einzelner Ereignishandler für diese beiden Ereignisse angehängt, und der Handler muss event.type untersuchen, um festzustellen, ob das Ereignis mouseenter oder mouseleave ist. Verwechseln Sie den Pseudoereignisnamen "hover" nicht mit der Methode .hover (), die eine oder zwei Funktionen akzeptiert.

Das wäre folgendes zu tun:

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

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

});

BEARBEITEN (Hinweis für Benutzer von jQuery 1.8+):

In jQuery 1.8 veraltet, in 1.9 entfernt: Der Name "hover" wird als Abkürzung für die Zeichenfolge "mouseenter mouseleave" verwendet. Es wird ein einzelner Ereignishandler für diese beiden Ereignisse angehängt, und der Handler muss event.type untersuchen, um festzustellen, ob das Ereignis mouseenter oder mouseleave ist. Verwechseln Sie den Pseudoereignisnamen "hover" nicht mit der Methode .hover (), die eine oder zwei Funktionen akzeptiert.

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

Sie können einen oder mehrere Ereignistypen angeben, die durch ein Leerzeichen getrennt sind.

Also hovergleich mouseenter mouseleave.

Das ist mein Vorschlag:

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

Wenn Sie es als Bedingung für ein anderes Ereignis benötigen, habe ich es folgendermaßen gelöst:

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

In einem anderen Fall können Sie es dann einfach verwenden:

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

(Ich sehe einige is(':hover'), die dies lösen, aber dies ist (noch) kein gültiger jQuery-Selektor und funktioniert nicht in allen kompatiblen Browsern.)

Das jQuery-Plugin hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html geht viel weiter als die hier aufgeführten naiven Ansätze. Während sie sicherlich funktionieren, verhalten sie sich möglicherweise nicht unbedingt so, wie Benutzer es erwarten.

Der stärkste Grund für die Verwendung von hoverIntent ist die Timeout- Funktion. Sie können beispielsweise verhindern, dass ein Menü geschlossen wird, weil ein Benutzer seine Maus etwas zu weit nach rechts oder links zieht, bevor er auf das gewünschte Element klickt. Es bietet auch Funktionen, um Schwebeereignisse in einem Staudamm nicht zu aktivieren, und wartet auf fokussiertes Schweben.

Anwendungsbeispiel:

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 )

Weitere Erläuterungen hierzu finden Sie unter https://stackoverflow.com/a/1089381/37055