jQuery-da Delegirlash

Agar siz JavaScript-ni o'rgangan bo'lsangiz, siz allaqachon hodisalarni delegirlash mavzusiga duch kelgansiz, uning yordamida misol uchun, yangi elementlar uchun hodisalarni biriktirishda paydo bo'ladigan muammolardan xalos bo'lish mumkin. Keling, buning jQuery-da qanday ko'rinishini ko'ramiz.

Quyidagi HTML kodini olaylik:

<ul>
	<li>matn</li>
	<li>matn</li>
	<li>matn</li>
</ul>

Buning uchun CSS shunday ko'rinadi:

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

Keling endi, on metodi yordamida, click metodini oldingi darslarda qilganimizdek, ro'yxat bandi li ga emas, balki ro'yxatning o'zi ul ga bog'laymiz. Shuningdek, biz ikkinchi (ixtiyoriy) parametr sifatida 'li' ni avlod selektori sifatida uzatamiz. Keling, nima natija qilganimizni ko'ramiz:

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

ul berilgan, uning ichida bir nechta li bor. ul tagiga tugma yarating, unga bosilganda ul oxiriga yangi li 'band' matni bilan qo'shilsin. Shuni tashkil qilingki, har bir li ustiga bosilganda, uning oxiriga '!' qo'shilsin. Bu yangi qo'shilgan li lar uchun ham ishlashi kerak. Vazifani delegirlash yordamida bajaring (ya'ni hodisa ul ga biriktirilgan bo'lishi kerak).

Ikki ustunli (ism va familiya) foydalanuvchilar jadvali berilgan. Jadval tagida forma yarating, uning yordamida jadvalga yangi foydalanuvchi qo'shish mumkin bo'lsin. Shuni tashkil qilingki, har qanday katakcha ustiga bosilganda prompt paydo bo'lsin, uning yordamida katakcha matnini o'zgartirish mumkin bo'lsin. Vazifani delegirlash yordamida bajaring (ya'ni hodisa table ga biriktirilgan bo'lishi kerak).