Delegasi dalam jQuery

Jika Anda pernah mempelajari JavaScript, maka Anda sudah pernah menemui topik delegasi peristiwa, yang dengannya Anda dapat, misalnya, menghilangkan masalah saat memasang peristiwa untuk elemen baru. Mari kita lihat, bagaimana hal itu akan terlihat dalam jQuery.

Ambil kode HTML berikut:

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

CSS untuk itu terlihat seperti ini:

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

Sekarang, dengan menggunakan metode on, mari kita ikat metode click bukan pada item daftar li, seperti yang kita lakukan di pelajaran sebelumnya, tetapi pada daftar ul itu sendiri. Kita juga akan meneruskan parameter kedua (opsional) 'li' sebagai selektor keturunan. Mari kita lihat hasilnya:

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

Diberikan ul, di dalamnya terdapat beberapa li. Di bawah ul buat tombol, yang ketika ditekan akan menambahkan li baru ke akhir ul dengan teks 'item'. Buat agar ketika mengklik setiap li, akan ditambahkan '!' di akhirnya. Ini harus bekerja juga untuk li yang baru ditambahkan. Selesaikan tugas dengan menggunakan delegasi (artinya peristiwa harus dipasang pada ul).

Diberikan tabel dengan pengguna yang memiliki dua kolom: nama depan dan nama belakang. Di bawah tabel buat formulir, dengan bantuan yang Anda dapat menambahkan pengguna baru ke tabel. Buat agar ketika mengklik sel mana pun muncul prompt, dengan bantuan yang Anda dapat mengubah teks sel. Selesaikan tugas dengan delegasi (artinya peristiwa harus dipasang pada table).