Universell on-metod i jQuery

För att binda händelser kan du också använda den universella metoden on. Den tar händelsens namn som första parameter (till exempel 'click'), och som andra - funktionen som ska bindas.

Låt oss titta på ett exempel med följande HTML-kod:

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

CSS ser ut så här:

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

Låt oss nu skriva om koden för li, som vi skrev tidigare, med metoden on. För att testa hur det fungerar, klicka på punkterna i listan:

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

Du kan samtidigt binda en funktion till flera typer av händelser - för att göra detta måste du lista dem med mellanslag: 'click mousemove etc.'. Till exempel, så här:

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

Binda alla länkar till en händelse - när musen förs över en länk ska dess href läggas till i slutet av dess text inom runda parenteser.

Binda alla input-fält till en händelse - när de förlorar fokus skriver varje input-fält ut sitt value i ett stycke med id=#test.