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 पर लगाया जाना चाहिए)।