jQuery-də Hadisə Delegasiyası

Əgər JavaScript öyrənmisinizsə, onda siz artıq yeni elementlər üçün hadisələr əlavə edərkən yarana biləcək problemlərdən, məsələn, qurtarmaq üçün istifadə edilə bilən hadisə delegasiyası mövzusu ilə qarşılaşmısınız. Gəlin görək bu, jQuery üçün necə görünəcək.

Aşağıdakı HTML kodunu götürək:

<ul>
	<li>mətn</li>
	<li>mətn</li>
	<li>mətn</li>
</ul>

Bunun üçün CSS belə görünür:

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

Gəlin indi, on metodu vasitəsilə, click metodunu əvvəlki dərslərdə etdiyimiz kimi siyahı maddəsinə li yox, siyahının özünə ul bağlayaq. Həmçinin, alt nəsillər üçün selektor kimi ikinci (məcburi olmayan) parametr kimi 'li' ötürəcəyik. Gəlin nə çıxdığını görək:

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

ul verilmişdir, onun içində bir neçə li var. ul-nin altında, kliklədikdə ul-nin sonuna mətni 'maddə' olan yeni li əlavə edən bir düymə edin. Hər bir li-yə kliklədikdə, onun sonuna '!' əlavə olunsun. Bu, yeni əlavə edilmiş li elementləri üçün də işləməlidir. Məsələni delegasiya ilə həll edin (yəni hadisə ul üzərinə əlavə edilməlidir).

İki sütunu (ad və soyad) olan istifadəçilər cədvəli verilmişdir. Cədvəlin altında, onunla cədvələ yeni istifadəçi əlavə etmək olan forma edin. Hər hansı bir xanaya kliklədikdə, onun mətnini dəyişmək üçün istifadə edilə bilən prompt görünməsini təmin edin. Məsələni delegasiya ilə həll edin (yəni hadisə table üzərinə əlavə edilməlidir).