jQuery'de Delegasyon

Eğer JavaScript öğrendiyseniz, yeni elementler için olaylar eklerken ortaya çıkan sorunlardan kurtulmanızı sağlayan olay delegasyonu konusuyla zaten karşılaşmışsınızdır. jQuery'de bunun nasıl görüneceğine bir bakalım.

Aşağıdaki HTML kodunu alalım:

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

Bunun için CSS şöyle görünür:

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

Şimdi, on metodunu kullanarak, önceki derslerde yaptığımız gibi click metodunu liste öğesi li'ye değil, listenin kendisi olan ul'ye bağlayalım. Ayrıca, alt eleman seçicisi olarak isteğe bağlı ikinci parametreye 'li' ileteceğiz. Bakalım ne oldu:

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

Bir ul verilsin, içinde birkaç tane li olsun. ul'nın altına, tıklandığında ul'nın sonuna 'madde' yazılı yeni bir li ekleyen bir buton yapın. Her bir li'ye tıklandığında, sonuna '!' eklenmesini sağlayın. Bu, yeni eklenen li'ler için de çalışmalı. Görevi delegasyon kullanarak çözün (yani olay ul'ye eklenmiş olmalı).

İki sütunlu (ad ve soyad) bir kullanıcı tablosu verilsin. Tablonun altında, tabloya yeni bir kullanıcı ekleyebileceğiniz bir form yapın. Herhangi bir hücreye tıklandığında, hücre metnini değiştirmek için kullanılabilecek bir prompt çıkmasını sağlayın. Görevi delegasyon kullanarak çözün (yani olay table'ye eklenmiş olmalı).