Phương thức on phổ quát trong jQuery

Để gắn sự kiện cũng có thể sử dụng phương thức phổ quát on. Tham số đầu tiên của nó nhận tên sự kiện (ví dụ, 'click'), còn tham số thứ hai - là hàm cần được gắn vào.

Hãy xem xét ví dụ với mã HTML sau:

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

CSS trông như thế này:

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

Bây giờ hãy viết lại mã cho li mà chúng ta đã viết trước đó thông qua phương thức on. Để kiểm tra hoạt động, hãy nhấp vào các mục trong danh sách:

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

Có thể đồng thời gắn một hàm cho nhiều loại sự kiện - để làm điều này cần liệt kê chúng cách nhau bằng dấu cách: 'click mousemove, v.v.'. Ví dụ như sau:

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

Gắn sự kiện cho tất cả các liên kết - khi di chuột qua liên kết, cuối văn bản của nó sẽ được thêm href của nó trong dấu ngoặc tròn.

Gắn sự kiện cho tất cả các ô input - khi mất focus, mỗi ô input sẽ xuất giá trị value của nó vào đoạn văn có id=#test.