jQuery .live () vs .on () metoda dodawania zdarzenia click po załadowaniu dynamicznego HTML

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.

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:

$('#parent').on("click", "#child", function() {});

Program obsługi zdarzeń zostanie dołączony do #parentobiektu 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 #parentobiektu nawet wtedy, gdy #childobiekt jeszcze nie istnieje, ale gdy później będzie istniał i zostanie kliknięty, zdarzenie click spowoduje bąbelkowanie do #parentobiektu, zobaczy, że ono powstało #childi istnieje moduł obsługi zdarzeń do kliknięcia #childi uruchomienia zdarzenia.

Spróbuj tego:

$('#parent').on('click', '#child', function() {
    // Code
});

Z $.on()dokumentacji:

Procedury obsługi zdarzeń są powiązane tylko z aktualnie wybranymi elementami; muszą istnieć na stronie w momencie, gdy Twój kod wywołuje połączenie .on().

Twój #childelement nie istnieje, gdy go wywołujesz $.on(), więc wydarzenie nie jest powiązane (w przeciwieństwie do $.live()). #parentJednak 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 #parentz #child.

$(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 clickdopasowywania dowolnego elementu (-ów) .selectorzdarzenie przechodzi do głównego dokumentu - o ile nie ma innych detektorów wywołujących event.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 documentile dzieci, dla których chcesz monitorować zdarzenia, znajdują się w tym elemencie nadrzędnym ... ale to naprawdę nie ma nic do roboty z pytaniem.

Odpowiednik .live () w wersji 1.7 wygląda następująco:

$(document).on('click', '#child', function() ...); 

Zasadniczo obejrzyj dokument pod kątem zdarzeń kliknięcia i przefiltruj je pod kątem #child.

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:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Wystarczy dołączyć go po załadowaniu jQuery i przed wywołaniem live ().

.on () dotyczy jQuery w wersji 1.7 i nowszej. Jeśli masz starszą wersję, użyj tego:

$("#SomeId").live("click",function(){
    //do stuff;
});

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:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Call caller (); po utworzeniu obiektu na takiej stronie.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

W ten sposób twoja funkcja jest wywoływana, gdy ma nie każde kliknięcie na stronie.