jQuery .change() विधि बाइंड होती है जावास्क्रिप्टआयोजन प्रबंधकर्ता "परिवर्तन"(तत्व परिवर्तन), या इस घटना को चयनित तत्व पर सक्रिय करता है। इस विधि का उपयोग HTML फॉर्म तत्वों के साथ किया जाता है।
आयोजन "चुनना"जब प्रपत्र तत्व का मान बदलता है (तत्व, और तत्व) तो सक्रिय हो जाता है। कृपया ध्यान दें कि रेडियो बटन, चेकबॉक्स और ड्रॉप-डाउन सूची तत्वों जैसे तत्वों के लिए, ईवेंट "चुनना"उपयोगकर्ता द्वारा चयन करने के तुरंत बाद कॉल किया जाता है, और टेक्स्ट सामग्री वाले तत्वों के लिए तब तक विलंब किया जाता है जब तक कि नियंत्रण फोकस खो न दे (उदाहरण के लिए, टेक्स्ट प्रकार वाले तत्व type = "text" , या )।
यदि किसी तत्व का मान बदल दिया जाता है जावास्क्रिप्ट, उदाहरण के लिए उपयोग करना jQuery विधि.val() फिर घटना "परिवर्तन"नहीं बुलाया गया.
jQuery सिंटैक्स: 1.0 सिंटैक्स: $(selector).change() // पैरामीटर के बिना उपयोग की जाने वाली विधि $(selector).change( हैंडलर) हैंडलर- समारोह (घटना इवेंटऑब्जेक्ट) सिंटैक्स 1.4.3: $(चयनकर्ता).परिवर्तन( इवेंटडेटा, हैंडलर) इवेंटडेटा-कुछ भी हैंडलर- समारोह (घटना इवेंटऑब्जेक्ट)कृपया ध्यान दें कि .change() विधि का उपयोग पैरामीटर के रूप में पारित फ़ंक्शन के संयोजन में किया जाता है ( हैंडलर) है, छोटा लेख.on() विधि, और पैरामीटर के बिना .trigger() विधि के लिए आशुलिपि है:
$(चयनकर्ता).पर(" परिवर्तन", हैंडलर) $(चयनकर्ता).ट्रिगर(" परिवर्तन")
jQuery 1.0 में जोड़ा गया (सिंटैक्स संस्करण 1.4.3 में अपडेट किया गया) पैरामीटर मान उदाहरण उपयोग jQuery .change() विधि का उपयोग करना (पैरामीटर के बिना और फ़ंक्शन के साथ) $(document).ready(function()( $("बटन" ).क्लिक करें(फ़ंक्शन()( // जब तत्व पर क्लिक किया जाता है तो फ़ंक्शन सेट करें $("textarea ").change(); // तत्व पर परिवर्तन ईवेंट को कॉल करें ) ); $(this).change(function ( )( // फ़ंक्शन को सेट करें जब किसी तत्व पर परिवर्तन ईवेंट ट्रिगर होता है जिसके साथ उपयोगकर्ता $("p ").css("display ", "block") // सेट करता है कि तत्वब्लॉक हो जाता है .text('कुछ बदल गया है') // टेक्स्ट सामग्री जोड़ें .fadeOut(750 ); // तत्व के लिए पारदर्शिता को सुचारू रूप से बदलें)); ) ); 1 2 क्लिक करें
1
2
3
1
2
मुझे बदला
इस उदाहरण में, jQuery की .change() विधि का उपयोग करके, जब एक तत्व (बटन) पर क्लिक किया जाता है, तो हम एक ईवेंट को सक्रिय करते हैं "परिवर्तन"तत्व पर. इस उदाहरण में इस तत्व के स्थान पर किसी अन्य तत्व का उपयोग किया जा सकता था।
कॉल किया गया या ट्रैक किया गया जावास्क्रिप्ट घटना"परिवर्तन" (आकार परिवर्तन घटना)।
- संस्करण जोड़ा गया: 1.0.परिवर्तन(हैंडलर(इवेंटऑब्जेक्ट))
हैंडलर(इवेंटऑब्जेक्ट)
प्रकार: फ़ंक्शन()
इवेंट हैंडलर फ़ंक्शन।
- संस्करण जोड़ा गया: 1.4.3.परिवर्तन(, हैंडलर(इवेंटऑब्जेक्ट))
इवेंटडेटा
प्रकार: वस्तु
डेटा वाला एक ऑब्जेक्ट जिसे हैंडलर को भेजा जाएगा।
हैंडलर(इवेंटऑब्जेक्ट)
प्रकार: फ़ंक्शन()
इवेंट हैंडलर फ़ंक्शन
- संस्करण जोड़ा गया: 1.0।परिवर्तन()
यह विधि .on("परिवर्तन", हैंडलर), और .trigger("परिवर्तन") का संक्षिप्त रूप है।
प्रपत्र फ़ील्ड बदलने पर परिवर्तन ईवेंट सक्रिय हो जाता है। यह खेतों को ट्रैक करता है, और। चुनिंदा बॉक्स, रेडियो बटन और चेकबॉक्स के लिए, ईवेंट परिवर्तन के तुरंत बाद सक्रिय होता है, अन्य मामलों में केवल उस समय जब उपयोगकर्ता किसी अन्य तत्व पर जाता है।
उदाहरण के लिए, हमारे पास निम्नलिखित HTML है:
विकल्प 1 विकल्प 2 हैंडलर को ट्रिगर करें
इवेंट हैंडलर को इस तरह जोड़ा जा सकता है:
$("।target").change(function() ( चेतावनी(" .change() के लिए हैंडलर कहा जाता है। )); ));
अब, जब हम चयनित तत्व का मान बदलते हैं, तो हमें एक संदेश दिखाई देगा। अन्य फ़ील्ड बदले जाने पर भी यह दिखाई देगा, लेकिन अन्य पर स्विच करने के बाद। यदि कोई परिवर्तन किए बिना तत्व फोकस खो देता है, तो घटना घटित नहीं होती है। इस घटना को स्वयं ट्रिगर करने के लिए, बिना तर्क के .change() विधि को कॉल करें:
$("#other").click(function() ($("।target").change(); ));
इस कोड को निष्पादित करने के बाद, हम पिछली सूची से संदेश देखेंगे। इस बार हम उसे दो बार देखेंगे, क्योंकि... हमारे पास फॉर्म में दो तत्व हैं।
उदाहरण:उदाहरण: चयन बॉक्स में परिवर्तनों को ट्रैक करना।
डेमो div बदलें (रंग: लाल; ) चॉकलेट कैंडी टैफ़ी कारमेल फ़ज कुकी $("select") .change(function() ( var str = ""; $("select option:selected").each(function() ( str += $(this).text() + " " )); $("div").text(str)).change();
जब कोई इनपुट फ़ील्ड बदला जाता है या कोई बटन क्लिक किया जाता है तो ऑनचेंज हैंडलर को कॉल किया जाता है।
नाम तर्क में इनपुट फ़ील्ड या बटन का लोअरकेस नाम होता है।
उदाहरण: प्रक्रिया ऑनचेंज (नाम: स्ट्रिंग); शुरू // यदि मूल्य या मात्रा फ़ील्ड बदल गए हैं, तो राशि की गणना करेंयदि नाम = "कीमत" या नाम = "सीएनटी" तो सुम्मा: = राउंडमुल (कीमत, सीएनटी, 2); // यदि राशि फ़ील्ड बदल दी गई है, तो कीमत की गणना करें।यदि नाम = "सुम्मा" तो मूल्य: = यदि (सीएनटी = 0, 0, राउंडडिव (सुम्मा, सीएनटी, 2)); अंत;
एक समान प्रभाव OnPriceChange, OnCntChange और OnSummaChange हैंडलर का उपयोग करके प्राप्त किया जा सकता है।
उदाहरण: प्रक्रिया ऑनप्राइसचेंज; आरंभ सारांश:= राउंडमुल(मूल्य, सीएनटी, 2); अंत; प्रक्रिया OnCntChange; आरंभ सारांश:= राउंडमुल(मूल्य, सीएनटी, 2); अंत; प्रक्रिया OnSummaChange; आरंभिक मूल्य:= यदि(सीएनटी=0, 0, राउंडडिव(सुम्मा, सीएनटी, 2)); अंत;
मॉड्यूलरिटी को व्यवस्थित करते समय इस हैंडलर का उपयोग करना सुविधाजनक है, क्योंकि यह लगभग सभी घटनाओं के बारे में जानकारी एकत्र करता है। उदाहरण के लिए:
वार बेसक्लास: वैरिएंट; प्रक्रिया ऑनक्रिएट; BaseDocument.Init(स्वयं) प्रारंभ करें; // एक बेस क्लास बनाएं और उसके साथ संदर्भों का आदान-प्रदान करें। दस्तावेज़ प्रारंभ करना.अंत; प्रक्रिया ऑनचेंज (नाम: स्ट्रिंग); बेसक्लास प्रारंभ करें.ऑनचेंज(नाम); // बेस क्लास में इवेंट पास करनाअंत;
या सिंगलटन का उपयोग करके मॉड्यूलरिटी का एक उदाहरण (संपादक के विवरण टैब पर मॉड्यूल प्रॉपर्टी):
प्रक्रिया ऑनक्रिएट; BaseClass.OnCreate(Self) शुरू करें; // दस्तावेज़ को प्रारंभ करें।अंत; प्रक्रिया ऑनचेंज (नाम: स्ट्रिंग); बेसक्लास प्रारंभ करें.ऑनचेंज(स्वयं, नाम); // बेस क्लास में इवेंट पास करना।अंत;
_तत्व"> तत्व HTML एक आइसक्रीम स्वाद चुनें: एक चुनें... चॉकलेट सार्डिन वेनिलामुख्य भाग (प्रदर्शन: ग्रिड; ग्रिड-टेम्पलेट-क्षेत्र: "परिणाम चुनें";) चुनें (ग्रिड-क्षेत्र: चयन करें;) .परिणाम (ग्रिड-क्षेत्र: परिणाम;)
जावास्क्रिप्ट स्थिरांक चयन तत्व = document.querySelector('आइस-क्रीम'); selectElement.addEventListener("change", (event) => ( const परिणाम = document.querySelector("।result"); परिणाम.textContent = `आपको $(event.target.value) पसंद है`; )); परिणाम पाठ इनपुट तत्वसहित कुछ तत्वों के लिए, परिवर्तन ईवेंट तब तक सक्रिय नहीं होता जब तक नियंत्रण फोकस खो न दे। नीचे दिए गए फ़ील्ड में कुछ दर्ज करने का प्रयास करें, और फिर ईवेंट को ट्रिगर करने के लिए कहीं और क्लिक करें।
HTML JavaScript const इनपुट = document.querySelector("input"); स्थिरांक लॉग = document.getElementById("लॉग"); इनपुट.एडइवेंटलिस्टनर ("परिवर्तन", अपडेटवैल्यू); फ़ंक्शन updateValue(e) ( log.textContent = e.target.value; ) परिणाम विशिष्टताएँ| HTML जीवन स्तर उस विनिर्देश में "परिवर्तन" की परिभाषा. |
जीवन स्तर |
इस पृष्ठ पर संगतता तालिका संरचित डेटा से तैयार की गई है। यदि आप डेटा में योगदान देना चाहते हैं, तो कृपया https://github.com/mdn/browser-compat-data देखें और हमें एक पुल अनुरोध भेजें।
GitHub पर संगतता डेटा अपडेट करें
| डेस्कटॉप मोबाइल | |||||||||||
| क्रोम एज फ़ायरफ़ॉक्स इंटरनेट एक्सप्लोरर ओपेरा सफारी एंड्रॉइड वेबव्यू एंड्रॉइड के लिए क्रोम एंड्रॉइड के लिए फ़ायरफ़ॉक्स आईओएस सैमसंग इंटरनेट पर एंड्रॉइड सफारी के लिए ओपेरा | |||||||||||
| क्रोम पूर्ण समर्थन हाँ | एज पूर्ण समर्थन 12 | फ़ायरफ़ॉक्स पूर्ण समर्थन हाँ | IE पूर्ण समर्थन हाँ | ओपेरा पूर्ण समर्थन हाँ | सफ़ारी पूर्ण समर्थन हाँ | WebView Android पूर्ण समर्थन हाँ | क्रोम एंड्रॉइड पूर्ण समर्थन हाँ | फ़ायरफ़ॉक्स एंड्रॉइड पूर्ण समर्थन हाँ | ओपेरा एंड्रॉइड पूर्ण समर्थन हां | सफ़ारी iOS पूर्ण समर्थन हाँ | सैमसंग इंटरनेट एंड्रॉइड पूर्ण समर्थन हाँ |
अलग-अलग ब्राउज़र हमेशा इस बात पर सहमत नहीं होते हैं कि कुछ विशेष प्रकार के इंटरैक्शन के लिए परिवर्तन ईवेंट को सक्रिय किया जाना चाहिए या नहीं। उदाहरण के लिए, कीबोर्ड नेविगेशन जब तक उपयोगकर्ता ने Enter नहीं दबाया या फ़ोकस को इससे दूर नहीं किया (बग 126379 देखें) तब तक तत्वों ने गेको में कोई परिवर्तन ईवेंट सक्रिय नहीं किया। हालाँकि, फ़ायरफ़ॉक्स 63 (क्वांटम) के बाद से, यह व्यवहार सभी प्रमुख ब्राउज़रों के बीच सुसंगत है।
