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

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