jquery live hover

161

Używam następującego kodu jquery, aby wyświetlić kontekstowy przycisk usuwania tylko dla wierszy tabeli, na które najeżdżamy myszą. Działa, ale nie w przypadku wierszy, które zostały dodane za pomocą js / ajax w locie ...

Czy istnieje sposób, aby to działało z wydarzeniami na żywo?

$("table tr").hover(
  function () {},
  function () {}
);
jquery live jquery-1.4 Jorre
źródło

Odpowiedzi:

245

jQuery 1.4.1 obsługuje teraz „hover” dla zdarzeń live (), ale tylko z jedną funkcją obsługi zdarzeń:

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

function () {

});

Alternatywnie możesz zapewnić dwie funkcje, jedną dla myszy i jedną dla mouseleave:

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

    },
    mouseleave: function () {

    }
});
Philippe Leybaert
źródło
Jednak nadal nie działa dla mnie. Próbowałem to zrobić: gdzie się mylę? > $ ('table tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});
Shripad Krishna
1
jest to niepoprawne i nie działa. zobacz nagłówek „Multiple Events” w dokumentacji live: api.jquery.com/live
Jason,
34
Od jQuery 1.4.2 .live ("hover") jest odpowiednikiem .live ("mouseover mouseout"), NIE .live ("mouseenter mouseleave") - zobacz bugs.jquery.com/ticket/6077 Więc zrób. live ("mouseenter mouseleave", function () {...}) lub .live ("mouseenter", function () {...}). live ("mouseleave", function () {...})
aem
2
dziękuję @aem, to zadziałało dla mnie: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});
jackocnr
3
Zgodnie ze stroną dokumentacji JQuery.live mówi się, że należy .onzamiast tego używać . „Od jQuery 1.7 metoda .live () jest przestarzała. Użyj .on (), aby dołączyć programy obsługi zdarzeń”.
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
źródło
U mnie też zadziałało. +1 Próbowałem robić wersję Philippe'a, zarówno z najechaniem kursorem, jak i przyciskiem myszy - żadne z nich nie działało. Ale ten zrobił. Dzięki!
eduncan911
.livejest teraz przestarzała, zobacz odpowiedź Andre na temat metody zamiany.
johntrepreneur
1
Użycie mouseoveri mouseoutzdarzenia w tym miejscu spowodują ciągłe uruchamianie kodu, gdy użytkownik porusza myszą wewnątrz elementu. Myślę mouseenteri mouseleavesą bardziej odpowiednie, ponieważ będzie odpalać tylko raz po wejściu.
johntrepreneur
60

.live() został wycofany z jQuery 1.7

.on()Zamiast tego użyj i określ selektor podrzędny

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

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector
Andre
źródło
6
działa to bezbłędnie od wersji 1.9 jQuery. wszystkie rozwiązania na żywo i dla delegatów są WYCOFANE! byłoby wspaniale, gdyby ktoś odrzucił zaakceptowaną odpowiedź i zamiast tego zaakceptował tę.
jascha
5

Począwszy od jQuery 1.4.1, zdarzenie hover działa z plikami live(). Po prostu wiąże się ze zdarzeniami mouseenter i mouseleave, co można zrobić z wersjami wcześniejszymi niż 1.4.1:

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

Wymaga to dwóch wiązań, ale działa równie dobrze.

Tatu Ulmanen
źródło
5

Ten kod działa:

    $(".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
źródło
2
Co to jest „ui-state-hover”? Jak to się ma do pierwotnego pytania użytkownika?
Igor Ganapolsky
2

OSTRZEŻENIE: W przypadku aktywnej wersji wskaźnika myszy występuje znaczny spadek wydajności. Jest to szczególnie widoczne na dużej stronie w IE8.

Pracuję nad projektem, w którym ładujemy wielopoziomowe menu za pomocą AJAX (mamy swoje powody :). W każdym razie użyłem metody na żywo do najechania kursorem, która działała świetnie w Chrome (IE9 działał OK, ale nie świetnie). Jednak w IE8 to nie tylko spowolniło menu (trzeba było najeżdżać kursorem przez kilka sekund, zanim spadło), ale wszystko na stronie było boleśnie powolne, w tym przewijanie, a nawet sprawdzanie prostych pól wyboru.

Wiązanie zdarzeń bezpośrednio po ich załadowaniu skutkowało odpowiednią wydajnością.

Brian
źródło
2
przydatne, ale bardziej komentarz niż odpowiedź.
mikemaccana