Delegasi dalam jQuery

Jika anda pernah mempelajari JavaScript, anda pasti telah berdepan dengan topik delegasi peristiwa, yang mana dengannya anda boleh, sebagai contoh, menghilangkan masalah ketika memasang peristiwa untuk elemen baharu. Mari kita lihat, bagaimana ia akan kelihatan untuk jQuery.

Mari ambil kod HTML berikut:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

CSS untuknya kelihatan seperti ini:

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

Sekarang, dengan menggunakan kaedah on, mari kita ikat kaedah click bukan kepada item senarai li, seperti yang kita lakukan dalam pelajaran sebelumnya, tetapi kepada senarai ul itu sendiri. Kita juga akan hantar parameter kedua (pilihan) 'li' sebagai pemilih keturunan. Mari lihat apa yang kita dapat:

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

Diberi ul, di dalamnya terdapat beberapa li. Di bawah ul buat satu butang, apabila ditekan akan menambah li baharu ke hujung ul dengan teks 'item'. Pastikan apabila setiap li diklik, '!' ditambah ke hujungnya. Ini harus berfungsi juga untuk li yang baru ditambah. Selesaikan tugas ini dengan menggunakan delegasi (iaitu peristiwa mesti dipasang pada ul).

Diberi jadual pengguna dengan dua lajur: nama dan nama keluarga. Di bawah jadual, buat satu borang, yang mana digunakan untuk menambah pengguna baharu ke dalam jadual. Pastikan apabila mana-mana sel diklik, prompt akan muncul, yang mana digunakan untuk mengubah teks sel. Selesaikan tugas dengan menggunakan delegasi (iaitu peristiwa mesti dipasang pada table).