Korzystam z jQuery v.1.7.1, gdzie metoda .live () jest najwyraźniej przestarzała.
Problemem jest to, że podczas dynamicznego ładowania HTML do elementu przy użyciu:
$('#parent').load("http://...");
Jeśli spróbuję później dodać zdarzenie kliknięcia, nie rejestruje ono zdarzenia przy użyciu jednej z następujących metod:
$('#parent').click(function() ...);
lub
// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...);
Jaki jest właściwy sposób na osiągnięcie tej funkcjonalności? Wydaje się, że działa tylko z .live () dla mnie, ale nie powinienem używać tej metody. Zauważ, że #child jest dynamicznie ładowanym elementem.
Dzięki.
.live()
ci, jak przepisać istniejące zastosowania.live()
użycia.delegate()
lub.on()
(w zależności od tego, czy korzystasz z wersji 1.7+, czy nie). Pamiętaj jednak, że jeśli dodasz moduł obsługi z.click()
„później”, jak wspomniałeś, tj. Po dynamicznym ładowaniu elementów, powinien on działać - jedynym problemem jest próba przypisania go.click()
przed dynamicznym ładowaniem elementów.Odpowiedzi:
Jeśli chcesz, aby moduł obsługi kliknięć działał dla elementu ładowanego dynamicznie, ustaw moduł obsługi zdarzeń na obiekcie nadrzędnym (który nie jest ładowany dynamicznie) i nadaj mu selektor pasujący do obiektu dynamicznego w następujący sposób:
Program obsługi zdarzeń zostanie dołączony do
#parent
obiektu i za każdym razem, gdy zdarzenie kliknięcia pojawi się nad nim#child
, co spowoduje jego uruchomienie. Nazywa się to obsługą zdarzeń delegowanych (obsługa zdarzeń jest delegowana do obiektu nadrzędnego).Odbywa się to w ten sposób, ponieważ można dołączyć zdarzenie do
#parent
obiektu nawet wtedy, gdy#child
obiekt jeszcze nie istnieje, ale gdy później będzie istniał i zostanie kliknięty, zdarzenie click spowoduje bąbelkowanie do#parent
obiektu, zobaczy, że ono powstało#child
i istnieje moduł obsługi zdarzeń do kliknięcia#child
i uruchomienia zdarzenia.źródło
live()
vs.on()
ale dzisiaj postanowiłem jeszcze raz spróbować, a wyjaśnienie natychmiast ujawnił, czego brakowało przez cały czas. Dzięki!mouseenter
imouseleave
wydarzeń oraz badania wewnątrz przewodnika, który z nich został wyzwolony. Pseudo „hover” zdarzenia jQuery nie jest dostępne w przypadku delegowania.Spróbuj tego:
Z
$.on()
dokumentacji:Twój
#child
element nie istnieje, gdy go wywołujesz$.on()
, więc wydarzenie nie jest powiązane (w przeciwieństwie do$.live()
).#parent
Jednak nie istnieje, więc związanie zdarzenie, które jest w porządku.Drugi argument w moim kodu powyżej działa jak filtr „” to tylko spust, jeśli zdarzenie przepuszczano do
#parent
z#child
.źródło
.load()
metody - nie z kodu po.load()
metodzie.#child
wiadomo, że jest ładowany tylko wtedy, gdy moduł obsługi sukcesu faktycznie się wykonuje, a nie wcześniej.$(document).on('click', '.selector', function() { /* do stuff */ });
EDYCJA: Podaję trochę więcej informacji o tym, jak to działa, ponieważ ... słowa. W tym przykładzie umieszczasz detektor na całym dokumencie.
Podczas
click
dopasowywania dowolnego elementu (-ów).selector
zdarzenie przechodzi do głównego dokumentu - o ile nie ma innych detektorów wywołującychevent.stopPropagation()
metodę - które nadpisałyby bąbelkowanie zdarzenia do elementów nadrzędnych.Zamiast wiązania z określonym elementem lub zestawem elementów, nasłuchujesz wszelkich zdarzeń pochodzących z elementów pasujących do określonego selektora. Oznacza to, że możesz jednorazowo utworzyć jednego detektora, który automatycznie dopasuje aktualnie istniejące elementy, a także dowolne elementy dodawane dynamicznie.
Jest to sprytne z kilku powodów, w tym wydajności i wykorzystania pamięci (w aplikacjach na dużą skalę)
EDYTOWAĆ:
Oczywiście najbliższy element nadrzędny, którego możesz słuchać, jest lepszy i możesz użyć dowolnego elementu, o
document
ile dzieci, dla których chcesz monitorować zdarzenia, znajdują się w tym elemencie nadrzędnym ... ale to naprawdę nie ma nic do roboty z pytaniem.źródło
$(element).on(...)
. Jest$(document).on(...,element,...)
. Różne bestie.Odpowiednik .live () w wersji 1.7 wygląda następująco:
Zasadniczo obejrzyj dokument pod kątem zdarzeń kliknięcia i przefiltruj je pod kątem #child.
źródło
.live()
dzieje)..live()
jest już nieaktualny, jest to, że źle jest umieścić wszystkie procedury obsługi zdarzeń na żywo w obiekcie dokumentu. Rzeczy mogą naprawdę, naprawdę zwolnić. Zdarzenia muszą być nie tylko bąbelkowane aż do dokumentu, ale możesz mieć wiele programów obsługi zdarzeń do przeglądania obiektu dokumentu. Główną zaletą.on()
jest to, że można dołączyć go do obiektu nadrzędnego, który jest znacznie bliżej rzeczywistego obiektu i drastycznie poprawić wydajność. Więc ... NIE zalecałbym używania.on()
z obiektem dokumentu. Znacznie lepiej wybrać bliższy obiekt nadrzędny..live()
podejście; jednak zdolność kontrolowania delegacji jest z pewnością korzystna.Wiem, że jest trochę za późno na odpowiedź, ale stworzyłem polifill dla metody .live (). Przetestowałem to w jQuery 1.11 i wydaje się, że działa całkiem dobrze. Wiem, że powinniśmy implementować metodę .on () tam, gdzie jest to możliwe, ale w dużych projektach, w których nie można przekonwertować wszystkich wywołań .live () na równoważne wywołania .on () z jakiegokolwiek powodu, poniższe mogą być praca:
Wystarczy dołączyć go po załadowaniu jQuery i przed wywołaniem live ().
źródło
.on () dotyczy jQuery w wersji 1.7 i nowszej. Jeśli masz starszą wersję, użyj tego:
źródło
.delegate()
działa znacznie lepiej niż.live()
to, dlatego jQuery doc zaleca ją i przestaje działać.live()
. Tak,.live()
nadal działa, ale odpowiedzi tutaj na SO powinny zalecać lepszy sposób robienia rzeczy. Widziałem to 20 razy tutaj na SO. Jeśli.live()
napiszesz kod tutaj na SO, zostanie on zanegowany (zwykle przeze mnie, chyba że jest z nim coś poważnie nie tak)..live()
zdecydowanie działa nawet w wersji 1.7, powinieneś nadal używać.delegate()
lub.on()
ponieważ.live()
był przestarzały z dobrego powodu. Dopóki zauważysz zmianę składni dwóch nowych funkcji, obie będą działać dobrze.Użyłem „live” w moim projekcie, ale jeden z moich znajomych zasugerował, że powinienem używać „on” zamiast live. A kiedy próbowałem go użyć, napotkałem problem taki jak ty.
Na moich stronach dynamicznie tworzę rzędy tabel przycisków i wiele rzeczy. ale kiedy używam magii, zniknęła.
Inne rozwiązania, takie jak używanie go jak dziecko, wywołują Twoje funkcje za każdym razem za każdym kliknięciem. Ale znajduję sposób, aby to się powtórzyło i oto rozwiązanie.
Napisz swój kod jako:
Call caller (); po utworzeniu obiektu na takiej stronie.
W ten sposób twoja funkcja jest wywoływana, gdy ma nie każde kliknięcie na stronie.
źródło