jquery live schweben

161

Ich verwende den folgenden Abfragecode, um eine kontextbezogene Löschschaltfläche nur für Tabellenzeilen anzuzeigen, die wir mit der Maus bewegen. Dies funktioniert jedoch nicht für Zeilen, die im laufenden Betrieb mit js / ajax hinzugefügt wurden ...

Gibt es eine Möglichkeit, diese Arbeit mit Live-Events zu machen?

$("table tr").hover(
  function () {},
  function () {}
);
jquery live jquery-1.4 Jorre
quelle

Antworten:

245

jQuery 1.4.1 unterstützt jetzt "hover" für live () -Ereignisse, jedoch nur mit einer Ereignishandlerfunktion:

$("table tr").live("hover",

function () {

});

Alternativ können Sie zwei Funktionen bereitstellen, eine für mouseenter und eine für mouseleave:

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});
Philippe Leybaert
quelle
Bei mir funktioniert es aber immer noch nicht. Ich habe versucht, dies zu tun: Wo gehe ich falsch? > $ ('table tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});
Shripad Krishna
1
Dies ist falsch und funktioniert nicht. Siehe den Header "Mehrere Ereignisse" in der Dokumentation für live: api.jquery.com/live
Jason
34
Ab jQuery 1.4.2 entspricht .live ("hover") .live ("mouseover mouseout"), NICHT .live ("mouseenter mouseleave") - siehe bugs.jquery.com/ticket/6077 . live ("mouseenter mouseleave", function () {...}) oder .live ("mouseenter", function () {...}). live ("mouseleave", function () {...})
aem
2
danke @aem, das hat bei mir funktioniert: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});
Jackocnr
3
Auf der JQuery- .liveDokumentationsseite heißt es, .onstattdessen zu verwenden . "Ab jQuery 1.7 ist die .live () -Methode veraltet. Verwenden Sie .on (), um Ereignishandler anzuhängen."
johntrepreneur
110 
$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/

dmitko
quelle
Hat auch für mich gearbeitet. +1 Versucht, Philippes Version zu machen, sowohl mit Mouseover als auch mit Mouseenter - beides hat nicht funktioniert. Aber dieser tat es. Vielen Dank!
eduncan911
.liveist jetzt veraltet, siehe Andres Antwort für die Ersatzmethode jetzt.
johntrepreneur
1
Wenn Sie mouseoverund mouseoutEreignisse hier verwenden, wird der Code kontinuierlich ausgelöst, wenn der Benutzer die Maus innerhalb des Elements bewegt. Ich denke mouseenterund bin mouseleaveangemessener, da es nur einmal beim Eintritt feuert.
johntrepreneur
60

.live() wurde ab jQuery 1.7 veraltet

Verwenden Sie .on()stattdessen und geben Sie einen Nachkommen-Selektor an

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector
Andre
quelle
6
Dies funktioniert ab jquery 1.9 einwandfrei. Alle Live- und Delegate-Lösungen sind DEPRECATED! Es wäre fantastisch, wenn jemand die akzeptierte Antwort nicht akzeptieren und stattdessen diese akzeptieren könnte.
Jascha
5

Ab jQuery 1.4.1 funktioniert das Hover-Ereignis mit live(). Es bindet im Grunde nur an die Ereignisse von mouseenter und mouseleave, was Sie auch mit Versionen vor 1.4.1 tun können:

$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

Dies erfordert zwei Bindungen, funktioniert aber genauso gut.

Tatu Ulmanen
quelle
5

Dieser Code funktioniert:

    $(".ui-button-text").live(
        'hover',
        function (ev) {
            if (ev.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            }

            if (ev.type == 'mouseout') {
                $(this).removeClass("ui-state-hover");
            }
        });
Jorge E. Cardona
quelle
2
Was ist "UI-State-Hover"? Wie trifft dies auf die ursprüngliche Frage des Benutzers zu?
IgorGanapolsky
2

WARNUNG: Bei der Live-Version von Hover gibt es erhebliche Leistungseinbußen. Dies macht sich besonders auf einer großen Seite im IE8 bemerkbar.

Ich arbeite an einem Projekt, in dem wir mehrstufige Menüs mit AJAX laden (wir haben unsere Gründe :). Wie auch immer, ich habe die Live-Methode für den Hover verwendet, die in Chrome großartig funktioniert hat (IE9 hat OK funktioniert, aber nicht großartig). In IE8 wurden jedoch nicht nur die Menüs verlangsamt (Sie mussten einige Sekunden lang schweben, bevor sie gelöscht wurden), sondern alles auf der Seite war schmerzhaft langsam, einschließlich Scrollen und sogar Aktivieren einfacher Kontrollkästchen.

Das Binden der Ereignisse direkt nach dem Laden führte zu einer angemessenen Leistung.

Brian
quelle
2
nützlich, aber eher ein Kommentar als eine Antwort.
Mikemaccana