Ủy quyền sự kiện trong jQuery

Nếu bạn đã học JavaScript, bạn chắc đã gặp chủ đề ủy quyền sự kiện, nhờ đó bạn có thể, ví dụ, loại bỏ các vấn đề khi gán sự kiện cho các phần tử mới. Hãy cùng xem cách thực hiện điều này trong jQuery.

Lấy đoạn mã HTML sau làm ví dụ:

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

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

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

Bây giờ, hãy sử dụng phương thức on, để gắn sự kiện click không phải vào mục danh sách li, như chúng ta đã làm trong các bài học trước, mà vào chính danh sách ul. Chúng ta cũng sẽ truyền tham số thứ hai (tùy chọn) 'li' với vai trò là bộ chọn phần tử con. Hãy xem kết quả:

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

Có một ul, bên trong có một vài li. Phía dưới ul, tạo một nút bấm, khi nhấn vào sẽ thêm một li mới vào cuối ul với văn bản 'mục'. Hãy làm sao để khi nhấp vào mỗi li, một dấu '!' được thêm vào cuối của nó. Điều này phải hoạt động cả cho các li mới được thêm vào. Hãy giải quyết bài tập bằng cách sử dụng ủy quyền sự kiện (tức là sự kiện phải được gán vào ul).

Có một bảng người dùng với hai cột: tên và họ. Bên dưới bảng, tạo một biểu mẫu để có thể thêm người dùng mới vào bảng. Hãy làm sao để khi nhấp vào bất kỳ ô nào, một hộp prompt sẽ xuất hiện, cho phép thay đổi văn bản trong ô đó. Hãy giải quyết bài tập bằng cách sử dụng ủy quyền sự kiện (tức là sự kiện phải được gán vào table).