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

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!

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+

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

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ę.

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”

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ęć