jQuery में एकल-बार घटना

जब हमने off विधि का उपयोग करके घटनाओं को अनबाइंड करना सीखा, तो हमने निम्नलिखित संरचना का उपयोग किया:

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

पहले हम on का उपयोग करके एक हैंडलर फ़ंक्शन संलग्न करते थे, फिर off का उपयोग करके इसे अनबाइंड कर देते थे।

jQuery में एक सुविधाजनक विधि one है, जो एक एकल-बार की घटना को बांधने की अनुमति देती है - यह केवल एक बार ही निष्पादित होगी, और फिर स्वचालित रूप से अनबाइंड हो जाएगी। यह विधि पहले पैरामीटर के रूप में घटना का प्रकार स्वीकार करती है, और दूसरे के रूप में - संलग्न फ़ंक्शन।

निम्नलिखित उदाहरण हम नीचे दिए गए HTML कोड के आधार पर देखेंगे:

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

CSS कोड इस तरह दिखता है:

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

अब प्रत्येक li से हम एक एकल-बार की घटना बांधते हैं:

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

सूची के आइटमों पर क्लिक करें। जैसा कि आप देख सकते हैं, हमें one विधि के लिए धन्यवाद वही प्रभाव मिला।

सभी लिंक्स से एक घटना बांधें - लिंक पर हॉवर करने पर उसके टेक्स्ट के अंत में उसका href गोल कोष्ठकों में जोड़ा जाए। लिंक पर पहली बार हॉवर करने के बाद उस घटना को अनबाइंड कर देना चाहिए जो टेक्स्ट के अंत में href जोड़ती है।

सभी इनपुट्स के लिए ऐसा करें कि वे उनमें से किसी पर भी क्लिक करने पर अपना value प्रदर्शित करें, लेकिन केवल पहली बार क्लिक करने पर। इनपुट पर दोबारा क्लिक करने से कोई प्रतिक्रिया नहीं होनी चाहिए।

संख्या वाले पैराग्राफ दिए गए हैं। पैराग्राफ पर क्लिक करने पर उसमें मौजूद संख्या का वर्ग प्रकट होना चाहिए, लेकिन केवल पहली बार क्लिक करने पर। पैराग्राफ पर डबल-क्लिक करने पर संख्या दोगुनी हो जानी चाहिए, लेकिन वह भी केवल पहली बार।

पैराग्राफ दिए गए हैं। ऐसा करें कि पहली बार पैराग्राफ पर क्लिक करने पर उसके अंत में '!' जोड़ा जाए, लेकिन केवल पहली बार क्लिक करने पर।