Universel on-metode i jQuery

Til at binde events kan du også bruge den universelle metode on. Den tager navnet på eventet som første parameter (f.eks. 'click'), og som andet parameter - funktionen, der skal bindes.

Lad os se på et eksempel med følgende HTML-kode:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

CSS ser sådan ud:

li {
	width: 100px;
	cursor: pointer;
}

Lad os nu omskrive koden for li, som vi skrev tidligere, ved hjælp af metoden on. For at teste hvordan det virker, kan du klikke på punkterne i listen:

$('li').on('click', function() {
	$(this).append('!');
});

Det er muligt at binde én funktion til flere typer events på samme tid - for at gøre dette skal man angive dem efter hinanden adskilt af mellemrum: 'click mousemove osv.'. For eksempel sådan her:

$('li').on('click mousemove', function func() {
	$(this).append('!');
});

Bind et event til alle links - når musen føres over et link, skal dens href tilføjes i parenteser til slutningen af linkets tekst.

Bind et event til alle inputfelter - når et inputfelt mister fokus, skal hvert inputfelt udskrive sin value i et afsnit med id=#test.