Universele methode on in jQuery

Voor het binden van events kun je ook gebruikmaken van de universele methode on. De eerste parameter is de naam van het event (bijvoorbeeld 'click'), en de tweede - de functie die gebonden moet worden.

Laten we een voorbeeld bekijken met de volgende HTML code:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

De CSS ziet er als volgt uit:

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

Laten we nu de code voor li die we eerder schreven herschrijven via de methode on. Klik op de lijstitems om de werking te testen:

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

Je kunt één functie gelijktijdig aan meerdere soorten events binden - om dit te doen moeten ze worden opgesomd, gescheiden door een spatie: 'click mousemove enz.'. Bijvoorbeeld, zo:

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

Bind aan alle links een event - wanneer er met de muis over een link wordt gehoverd, wordt zijn href tussen ronde haakjes aan het einde van de tekst toegevoegd.

Bind aan alle inputs een event - bij verlies van focus moet elke input zijn value naar de paragraaf met id=#test sturen.