jQuery-তে ডেলিগেশন

আপনি যদি JavaScript শেখেন, তাহলে আপনি ইতিমধ্যেই ইভেন্ট ডেলিগেশনের বিষয়ের সম্মুখীন হয়েছেন, যার সাহায্যে নতুন এলিমেন্টের জন্য ইভেন্ট সংযুক্ত করার সময় সমস্যা দূর করা যায়। আসুন দেখি, jQuery-তে এটি কেমন দেখাবে।

নিচের HTML কোডটি নেওয়া যাক:

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

এর জন্য CSS এইরকম দেখাচ্ছে:

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

এখন আসুন, on মেথড ব্যবহার করে, click মেথডটি li লিস্ট আইটেমে সংযুক্ত না করে, সরাসরি ul লিস্টটিতে সংযুক্ত করি। এছাড়াও আমরা দ্বিতীয় (ঐচ্ছিক) প্যারামিটার হিসেবে 'li' সিলেক্টরটি ডিসেন্ডেন্ট হিসেবে পাস করব। দেখি কি পাওয়া যায়:

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

একটি ul দেওয়া আছে, তার মধ্যে কয়েকটি li আছে। ul-এর নিচে একটি বাটন তৈরি করুন, যেটিতে ক্লিক করলে ul-এর শেষে একটি নতুন li যুক্ত হবে যার টেক্সট 'পয়েন্ট'। এমনভাবে তৈরি করুন যাতে প্রতিটি li-এ ক্লিক করলে, তার শেষে '!' যুক্ত হয়। এটি নতুন করে যোগ করা li-এর জন্যও কাজ করা উচিত। ডেলিগেশন ব্যবহার করে টাস্কটি সমাধান করুন (অর্থাৎ ইভেন্টটি ul-এর উপর সংযুক্ত থাকতে হবে)।

ব্যবহারকারীদের সাথে একটি টেবিল দেওয়া আছে যার দুটি কলাম আছে: নাম এবং উপাধি। টেবিলের নিচে একটি ফর্ম তৈরি করুন, যার সাহায্যে টেবিলে一个新 নতুন ব্যবহারকারী যোগ করা যাবে। এমনভাবে তৈরি করুন যাতে কোনও সেলে ক্লিক করলে একটি prompt প্রদর্শিত হয়, যার সাহায্যে সেলের টেক্সট পরিবর্তন করা যাবে। ডেলিগেশন ব্যবহার করে টাস্কটি সমাধান করুন (অর্থাৎ ইভেন্টটি table-এর উপর সংযুক্ত থাকতে হবে)।