Uniwersalna metoda on w jQuery

Do wiązania zdarzeń można również używać uniwersalnej metody on. Pierwszym parametrem przyjmuje nazwę zdarzenia (na przykład 'click'), a drugim - funkcję, którą należy powiązać.

Rozważmy przykład na następującym kodzie HTML:

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

CSS wygląda tak:

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

Teraz przepiszmy kod dla li, który pisaliśmy wcześniej za pomocą metody on. Aby sprawdzić działanie, klikaj na pozycje listy:

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

Można jednocześnie powiązać jedną funkcję z kilkoma typami zdarzeń - w tym celu należy je wymienić przez spację: 'click mousemove itd.'. Na przykład tak:

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

Powiąż wszystkim linkom zdarzenie - po najechaniu na link na koniec jej tekstu dopisywany jest jej href w okrągłych nawiasach.

Powiąż wszystkim inputom zdarzenie - po utracie fokusu każdy input wypisuje swoją wartość value do akapitu z id=#test.