Włączanie funkcji live () w on () w jQuery

202

Moja aplikacja dynamicznie dodała menu rozwijane. Użytkownik może dodać tyle, ile potrzebuje.

Tradycyjnie używałem live()metody jQuery do wykrywania, kiedy edowano jedno z tych rozwijanych menu change():

$('select[name^="income_type_"]').live('change', function() {
    alert($(this).val());
});

Od jQuery 1.7 zaktualizowałem to do:

$('select[name^="income_type_"]').on('change', function() {
    alert($(this).val());
});

Patrząc na Dokumenty, powinno to być całkowicie poprawne (prawda?) - ale moduł obsługi zdarzeń nigdy nie odpala. Oczywiście potwierdziłem, że jQuery 1.7 jest załadowany i działa itp. W dzienniku błędów nie ma błędów.

Co ja robię źle? Dzięki!

javascript jquery jquery-1.7

— Jacek
źródło

2

Wiem, że jest późno, ale wygląda na to, że jQuery i livetak używa on, więc ponowne zapisanie starszego kodu może nie być jeszcze potrzebne, dopóki livenie zostanie usunięte, co moim zdaniem wynosi 1,9. Fragment źródła 1.7.1: live: function( types, data, fn ) {jQuery( this.context ).on( types, this.selector, data, fn ); return this;}Jeśli więc nie przeprowadzasz aktualizacji do wersji, w której livejuż nie ma aktualizacji, aktualizacja starszego kodu może nie być potrzebna od razu. W przypadku nowego kodu użycie oczywiście on()jest zamiast tego zalecane. Pomyślałem, że ta informacja może pomóc komuś innemu na pewnym etapie.

— Nie,

1

Zobacz migracji przykładów , w jaki sposób zmienia livesię on.

— Samuel Liew

246

W ondokumentacji Zjednoczone (pogrubione;)):

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().

Odpowiednikiem .live()byłoby coś takiego

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

Chociaż lepiej jest powiązać moduł obsługi zdarzeń jak najbliżej elementów, to znaczy elementu znajdującego się bliżej w hierarchii.

Aktualizacja: Odpowiadając na inne pytanie, dowiedziałem się, że jest to również wspomniane w .livedokumentacji :

Przepisanie .live()metody pod kątem jej następców jest proste; są to szablony równoważnych wywołań dla wszystkich trzech metod dołączania zdarzeń:
$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

— Felix Kling
źródło

5

@Jack: Bez obaw, IMO to dobre pytanie. Przypuszczam, że inni będą przewracać to za dobrze, gdy próbują nawracać wszystkich bind, livei delegatewywołania on.

— Felix Kling,

4

Ach tak, i oczywiście tę odpowiedź widzimy dopiero po uruchomieniu kocowania znajdź i zamień z .live>.on

— ajbeaven,

3

IMO, .onskładnia jest bardziej logiczna, ponieważ detektor jest faktycznie podłączony do podanego selektora. Gdy zdarzenie jest wyzwalane, jQuery przechodzi przez DOM i wykonuje procedury obsługi tam, gdzie zostało to określone (proste delegowanie zdarzeń). .livezasugerował, że wydarzyło się coś „magicznego”, i powiedziano, że dołącza procedury obsługi zdarzeń dla „przyszłych elementów”, co nie było do końca prawdą.

— David Hellsing,

1

@ FelixKling to prawda - natknąłem się na to również! Dzięki

— willdanceforfun,

2

W przypadku wyszukiwarki: Metoda jQuery „.live ()” jest deprecjonowana od wersji 1.7 i usunięta w wersji 1.9. Napraw skrypty za pomocą metody „.on ()”. Zaskakująco wpływa to również na bieżący plik jquery.unobtrusive-ajax.js v2.0.20710.0 firmy Microsoft (Microsoft również nie zaktualizował swoich skryptów, więc teraz jest zepsuty).

— Tony Wall

25

Oprócz wybranej odpowiedzi

Port jQuery.livedo jQuery 1.9+ poczekaniu dla aplikacji do migracji. Dodaj to do pliku JavaScript.

// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
  live: function( types, data, fn ) {
          if( window.console && console.warn ) {
           console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
          }

          jQuery( this.context ).on( types, this.selector, data, fn );
          return this;
        }
});

Uwaga: Powyższa funkcja nie będzie działać z jQuery v3, ponieważ this.selectorzostała usunięta.

Lub możesz użyć https://github.com/jquery/jquery-migrate

— Vikrant Chaudhary
źródło

7

Właśnie znalazłem lepsze rozwiązanie, które nie wymaga edycji kodu innej firmy:

https://github.com/jquery/jquery-migrate/#readme

Zainstaluj pakiet jQuery Migrate NuGet w programie Visual Studio, aby wszystkie problemy z wersjonowaniem zniknęły. Następnym razem Microsoft zaktualizuje swoje dyskretne moduły AJAX i moduły sprawdzania poprawności, być może wypróbuje je ponownie bez skryptu migracji, aby sprawdzić, czy problem został rozwiązany.

Ponieważ jQuery Migrate jest utrzymywane przez jQuery Foundation, myślę, że jest to nie tylko najlepsze podejście do bibliotek stron trzecich, ale także do otrzymywania komunikatów ostrzegawczych dla twoich bibliotek, szczegółowo opisujących ich aktualizację.

— Tony Wall
źródło

3

Oprócz wybranych odpowiedzi

Jeśli korzystasz z Visual Studio , możesz użyć Regex Replace .
W Edycji> Znajdź i zamień> Zamień w plikach
lub Ctrl + Shift + H

W wyskakującym okienku Znajdź i zamień ustaw te pola

Znajdź: \$$(.*)$\.live\((.*),
Zamień na: $(document.body).on($2,$1,
W opcjach wyszukiwania zaznacz „Użyj wyrażeń regularnych”

— Maykol Rypka
źródło

-1

jquery wersja xxxjs otwórz edytor, znajdź jQuery.fn.extend

dodaj kod

live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },

Przykład: jquery-2.1.1.js -> wiersz 7469 (jQuery.fn.extend)

Przykładowy widok zdjęć

— Uğur Tosun
źródło