javascript - Å gjøre om live() til on() i jQuery

Applikasjonen min har dynamisk lagt til rullegardinmenyer. Brukeren kan legge til så mange de trenger.

Jeg brukte tradisjonelt jQuerys live()-metode for å oppdage når en av disse rullegardinene ble change()et:

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

Fra og med jQuery 1.7 har jeg oppdatert dette til:

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

Ser man på dokumentasjonen, burde det være helt gyldig (ikke sant?) - men hendelseshåndtereren aktiveres aldri. Selvfølgelig har jeg bekreftet at jQuery 1.7 er lastet inn og kjører, osv. Det er ingen feil i feilloggen.

Hva gjør jeg galt? Takk!

Svar #1

Dokumentasjonen for on sier (med fet skrift ;)):

Hendelseshåndterere er bundet kun til de for øyeblikket valgte elementene; de må eksistere på siden på tidspunktet koden din gjør kall til .on().

Tilsvarende .live() ville være noe som

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

Selv om det er bedre om du binder hendelsesbehandleren så nær som mulig elementene, det vil si til et element som er nærmere i hierarkiet.

Oppdatering: Mens jeg svarte på et annet spørsmål, oppdaget jeg at dette også er nevnt i .live-dokumentasjonen:

Å omskrive .live()-metoden i forhold til dens etterfølgere er enkelt; Dette er maler for ekvivalente kall for alle tre hendelsesvedleggsmetodene:

$(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+

Svar #2

I tillegg til det valgte svaret,

Port jQuery.live til jQuery 1.9+ mens du venter på at applikasjonen din skal migrere. Legg dette til i JavaScript-filen din.

// 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;
        }
});

Merk: Ovennevnte funksjon vil ikke fungere fra jQuery v3 siden this.selector er fjernet.

Eller, du kan bruke https://github.com/jquery/jquery-migrate

Relaterte artikler