Onchange JavascripT ne radi prema očekivanjima. Rukovatelj događaja promjene Javascripta ili poziv događaja odabira izvora onchange

jQuery .change() metoda povezuje JavaScript rukovatelj događajima "promijeniti"(promjena elementa) ili aktivira ovaj događaj na odabranom elementu. Metoda se koristi s elementima HTML obrasca.

Događaj "Izaberi" Aktivira se kada se promijeni vrijednost elementa obrasca (elementi i elementi). Imajte na umu da za elemente kao što su radio gumbi, potvrdni okviri i elementi padajućeg popisa događaj "Izaberi" poziva se odmah nakon što korisnik odabere, a za elemente s tekstualnim sadržajem odgađa se dok kontrola ne izgubi fokus (na primjer, elementi s tipom teksta type = "text" , ili ).

Ako se vrijednost elementa mijenja korištenjem JavaScript, na primjer pomoću jQuery metoda.val() , zatim događaj "promijeniti" nije pozvan.

Imajte na umu da se metoda .change() koja se koristi u kombinaciji s funkcijom proslijeđenom kao parametar ( rukovatelj) je, kratka bilješka metoda .on(), a bez parametra je skraćenica za metodu .trigger():

$(selektor).on(" promijeniti", rukovatelj) $(selektor).trigger(" promijeniti")

Postaje blok .text("Nešto se promijenilo") // dodaj tekstualni sadržaj .fadeOut(750 ); // glatka promjena prozirnosti za element ) ); ) ); Kliknite 1 2

1 2 3

1 2



Promijeni me

U ovom primjeru, koristeći jQueryjevu metodu .change(), kada se klikne element (gumb), aktiviramo događaj "promijeniti" na elementu. Bilo koji drugi element u ovom primjeru mogao se koristiti umjesto ovog elementa.

Pozvan ili praćen JavaScript događaj"promjena" (događaj promjene oblika).

• dodana verzija: 1.0.change(handler(eventObject))

  rukovatelj(eventObject)

  Tip: funkcija()

  Funkcija rukovatelja događajima.

• dodana verzija: 1.4.3.change(, handler(eventObject))

  eventData

  Vrsta: Objekt

  Objekt s podacima koji će biti proslijeđeni rukovatelju.

  rukovatelj(eventObject)

  Tip: funkcija()

  Funkcija rukovatelja događajima

• dodana verzija: 1.0.promijeniti()

Ova metoda je skraćenica za .on("promjena", rukovatelj) i .trigger("promjena").

Događaj promjene aktivira se kada se promijene polja obrasca. Prati polja i . Za okvire za odabir, radio gumbe i potvrdne okvire, događaj se aktivira odmah nakon promjene, u drugim slučajevima samo u trenutku kada se korisnik pomakne na drugi element.

Na primjer, imamo sljedeći HTML:

Opcija 1 Opcija 2 Aktiviraj rukovatelj

Rukovatelj događajima može se priložiti ovako:

$(".target").change(function() ( alert("Pozvan rukovatelj za .change()."); ));

Sada, kada promijenimo vrijednost odabranog elementa, vidjet ćemo poruku. Također će se pojaviti ako se druga polja promijene, ali nakon prelaska na druga. Ako element izgubi fokus bez ikakvih promjena, događaj se ne događa. Kako biste sami pokrenuli ovaj događaj, samo pozovite metodu .change() bez argumenata:

$("#other").click(function() ( $(".target").promijeni(); ));

Nakon izvršenja ovog koda, vidjet ćemo poruku iz prethodnog popisa. Ovaj put ćemo ga vidjeti dvaput, jer... Imamo dva elementa u našem obliku.

Primjer: praćenje promjena u okviru za odabir.

promijeni demo div ( boja: crvena; ) Čokoladni bomboni Taffy Caramel Fudge Cookie $("select") .change(function () ( var str = ""; $("select option:selected").each(function() ( str += $(this).text() + " "; $("div").text(str ));

Rukovatelj OnChange poziva se kada se bilo koje polje za unos promijeni ili se klikne bilo koji gumb.

Argument Naziv sadrži naziv polja za unos ili gumba malim slovima.

Primjer: Procedura OnChange(Naziv: String); Početi // Ako su polja cijene ili količine promijenjena, tada izračunajte iznos If Name="price" Or Name="cnt" Then Summa:= RoundMul(Price, Cnt, 2); // Ako je polje iznosa promijenjeno, izračunajte cijenu. If Name="suma" Then Cijena:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Kraj;

Sličan učinak može se postići korištenjem rukovatelja OnPriceChange, OnCntChange i OnSummaChange.

Primjer: Procedura OnPriceChange; Begin Summa:= RoundMul(Cijena, Cnt, 2); Kraj; Procedura OnCntChange; Begin Summa:= RoundMul(Cijena, Cnt, 2); Kraj; Procedura OnSummaChange; Početna cijena:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Kraj;

Ovaj rukovatelj je prikladan za korištenje pri organiziranju modularnosti, jer prikuplja informacije o gotovo svim događajima. Na primjer:

Var BaseClass: varijanta; Procedura OnCreate; Begin BaseDocument.Init(Self); // Kreirajte osnovnu klasu i razmijenite reference s njom. Inicijaliziranje dokumenta. Kraj; Procedura OnChange(Naziv: String); Begin BaseClass.OnChange(Name); // Prosljeđivanje događaja osnovnoj klasi Kraj;

Ili primjer modularnosti pomoću singletona (svojstvo modula na kartici Opis uređivača):

Procedura OnCreate; Begin BaseClass.OnCreate(Self); // Inicijaliziraj dokument. Kraj; Procedura OnChange(Naziv: String); Begin BaseClass.OnChange(Self, Name); // Prosljeđivanje događaja osnovnoj klasi. Kraj;

Body ( display: grid; grid-template-areas: "select result"; ) select ( grid-area: select; ) .result ( grid-area: result; )

Za neke elemente, uključujući , događaj promjene se ne aktivira sve dok kontrola ne izgubi fokus. Pokušajte unijeti nešto u polje ispod, a zatim kliknite negdje drugdje da pokrenete događaj.

Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.

Ažurirajte podatke o kompatibilnosti na GitHubu

Različiti se preglednici ne slažu uvijek treba li se aktivirati događaj promjene za određene vrste interakcija. Na primjer, navigacija tipkovnicom u elementi nikada nisu pokrenuli događaj promjene u Gecku sve dok korisnik nije pritisnuo Enter ili prebacio fokus s (pogledajte bug 126379). Međutim, od Firefoxa 63 (Quantum), ovo je ponašanje dosljedno u svim glavnim preglednicima.