दिलचस्प पोस्ट
AngularJs $ http.post () डेटा नहीं भेजता है एंड्रॉइड स्टूडियो 2.0 – प्लगइन बहुत पुराना है, कृपया एक और हाल के संस्करण में अपडेट करें, या एंड्रॉइड_एडीआईएलआई_ओवरआरिड परिवेश चर को सेट करें जांचें कि क्या एक PHP कुकी मौजूद है और यदि उसका मान सेट नहीं है प्रासंगिक कार्रवाई पट्टी शैलियों फास्ट बिग्नम वर्ग गणना एजेक्स सफलता कॉलबैक फ़ंक्शन के अंदर $ (इस) तक कैसे पहुंचें MySQL datetime फ़ील्ड और डेलाइट बचत समय – मैं "अतिरिक्त" घंटे का संदर्भ कैसे दूं? PHP का उपयोग करके कई फाइल अपलोड कैसे करें .NET कंसोल ऐप को कैसे चलाना है? FOS UserBundle URL को कैसे अनुकूलित करें जावा में सरल HTTP सर्वर जावा एसई एपीआई का उपयोग कर क्या किसी को भी समझाया जा सकता है JSONP क्या है, सामान्य शब्दों में? MSI या Visual Studio 2012 के साथ सेटअप प्रोजेक्ट बनाएँ जावा: त्रुटि: चर शुरू नहीं किया गया हो सकता है jQuery AJAX क्रॉस डोमेन

क्यों jQuery या एक DOM विधि जैसे getElementById तत्व नहीं मिल रहा है?

document.getElementById , $("#id") या किसी अन्य DOM विधि / jQuery चयनकर्ता के संभावित कारण क्या तत्व नहीं हैं?

उदाहरण समस्याओं में शामिल हैं:

jQuery चुपचाप एक ईवेंट हैंडलर को बाइंड करने में विफल रहता है, और एक मानक DOM विधि लौट रही है जिसके परिणामस्वरूप त्रुटि उत्पन्न होती है:

अनचाहे प्रकार त्रुटि: प्रॉपर्टी '…' की रिक्त स्थिति निर्धारित नहीं की जा सकती

Solutions Collecting From Web of "क्यों jQuery या एक DOM विधि जैसे getElementById तत्व नहीं मिल रहा है?"

जिस तत्व को आप ढूंढने का प्रयास कर रहे थे वह DOM में नहीं था, जब आपकी स्क्रिप्ट चालू हुई।

आपकी DOM- निर्भर स्क्रिप्ट की स्थिति उसके व्यवहार पर गहरा प्रभाव हो सकती है ब्राउज़र HTML दस्तावेज़ को ऊपर से नीचे तक पार्स करते हैं। तत्वों को डोम में जोड़ दिया जाता है और लिपियों को आम तौर पर निष्पादित किया जाता है (सामान्यतः) जिनका सामना करना पड़ता है। इसका मतलब है कि आदेश मामलों सामान्यतया, स्क्रिप्ट तत्वों को नहीं ढूँढ पा रहे हैं जो बाद में मार्कअप में दिखाई देते हैं क्योंकि उन तत्वों को अभी तक DOM में जोड़ा जाना है।

निम्नलिखित मार्कअप पर विचार करें; स्क्रिप्ट # 1 <div> खोजने में विफल रहता है जबकि स्क्रिप्ट # 2 सफल होता है:

 <script> console.log("script #1: %o", document.getElementById("test")); // null </script> <div id="test">test div</div> <script> console.log("script #2: %o", document.getElementById("test")); // <div id="test" ... </script> 

संक्षिप्त और सरल: क्योंकि जिन तत्वों को आप ढूंढ रहे हैं, वे दस्तावेज़ में मौजूद नहीं हैं (अभी तक)


इस उत्तर के शेष के लिए मैं getElementById उदाहरण उदाहरण के रूप में प्रयोग करेंगे, लेकिन querySelector , querySelector और तत्वों का चयन करने वाली किसी भी अन्य DOM पद्धति को भी लागू होता है।

संभावित कारण

एक तत्व अस्तित्व में नहीं हो सकता दो कारण हैं:

  1. पास आईडी के साथ एक तत्व वास्तव में दस्तावेज़ में मौजूद नहीं है। आपको यह जांच करनी चाहिए कि आप जिस आईडी को पास करने के लिए पास करते हैं, getElementById वास्तव में (जेनरेट किए गए) एचटीएमएल में एक मौजूदा तत्व की आईडी से मेल खाता है और आपने आईडी को गलत वर्तनी नहीं दी है (आईडी मामूली -संवेदनशील है !)।

    संयोग से, समसामयिक ब्राउज़रों में , जो querySelector() और querySelectorAll() तरीके को कार्यान्वित करते हैं, सीएसएस-स्टाइल संकेतन का उपयोग किसी तत्व को उसके id द्वारा प्राप्त करने के लिए किया जाता है, उदाहरण के लिए: document.querySelector('#elementID') , के विपरीत विधि जिसके द्वारा एक तत्व को document.getElementById('elementID') तहत अपने id द्वारा प्राप्त किया जाता है document.getElementById('elementID') ; पहले में # चरित्र जरूरी है, दूसरे में यह तत्व पुनः प्राप्त नहीं किया जाएगा।

  2. इस समय तत्व मौजूद नहीं है , जब आप कॉल प्राप्त getElementById

बाद के मामले में काफी आम है ब्राउज़र्स ऊपर से नीचे तक HTML को पार्स और प्रोसेस करते हैं। इसका मतलब है कि किसी DOM तत्व को कोई कॉल जो HTML में प्रकट होने से पहले DOM तत्व दिखाई देता है, विफल हो जाएगा।

निम्नलिखित उदाहरण पर विचार करें:

 <script> var element = document.getElementById('my_element'); </script> <div id="my_element"></div> 

script बाद दिखाई देता है फिलहाल स्क्रिप्ट निष्पादित की जाती है, तत्व अभी तक मौजूद नहीं है और getElementById null वापस करेगा।

jQuery

वही jQuery के साथ सभी चयनकर्ताओं पर लागू होता है। अगर आप अपने चयनकर्ता को गलत वर्तनी नहीं देते या आप वास्तव में मौजूद होने से पहले उन्हें चुनने की कोशिश कर रहे हैं, तो jQuery के तत्व नहीं मिलेगा।

एक जोड़ा ट्विस्ट है, जब jQuery नहीं मिला क्योंकि आपने प्रोटोकॉल के बिना स्क्रिप्ट लोड किया है और फ़ाइल सिस्टम से चल रहे हैं:

 <script src="//somecdn.somewhere.com/jquery.min.js"></script> 

इस सिंटैक्स को प्रोटोकॉल https: // के साथ एक पृष्ठ पर HTTPS के माध्यम से लोड करने की अनुमति देने के लिए और प्रोटोकॉल http: // के साथ एक पृष्ठ पर HTTP संस्करण लोड करने के लिए उपयोग किया जाता है

प्रयास करने और file://somecdn.somewhere.com... लोड करने में असफल होने का दुर्भाग्यपूर्ण दुष्प्रभाव है file://somecdn.somewhere.com...


समाधान की

getElementById (या उस बात के लिए किसी भी डीओएम विधि) को कॉल करने से पहले, सुनिश्चित करें कि आप मौजूद तत्वों को एक्सेस करना चाहते हैं, अर्थात DOM लोड हो रहा है।

यह इसी संगत DOM तत्व के बाद अपने जावास्क्रिप्ट को डालकर सुनिश्चित किया जा सकता है

 <div id="my_element"></div> <script> var element = document.getElementById('my_element'); </script> 

उस स्थिति में आप समापन बॉडी टैग ( </body> ) से पहले कोड भी डाल सकते हैं (सभी DOM तत्व स्क्रिप्ट निष्पादित होने पर उपलब्ध होंगे)।

अन्य समाधानों में load [ DOMContentLoaded ] या DOMContentLoaded [ DOMContentLoaded ] इवेंट्स को सुनना शामिल है। इन मामलों में यह कोई फर्क नहीं पड़ता कि आपने जावास्क्रिप्ट कोड को कहाँ रखा है, आपको इवेंट हैंडलर्स में सभी डोम प्रसंस्करण कोड डालना याद रखना होगा।

उदाहरण:

 window.onload = function() { // process DOM elements here }; // or // does not work IE 8 and below document.addEventListener('DOMContentLoaded', function() { // process DOM elements here }); 

ईवेंट हैंडलिंग और ब्राउज़र अंतर के बारे में अधिक जानकारी के लिए कृपया quirksmode.org पर लेख देखें।

jQuery

पहले सुनिश्चित करें कि jQuery को ठीक से लोड किया गया है। ब्राउजर के डेवलपर टूल्स का पता लगाने के लिए कि क्या jQuery फ़ाइल मिली और यूआरएल को ठीक करने के लिए उपयोग करें यदि ऐसा नहीं है (जैसे कि http: या https: स्कीम को शुरुआत में, पथ समायोजित करें आदि)

load / DOMContentLoaded घटनाओं को DOMContentLoaded ठीक है कि jQuery के साथ क्या कर रहा है .ready() [डॉक्स] आपके सभी jQuery कोड जो DOM तत्व को प्रभावित करता है, उस ईवेंट हैंडलर के अंदर होना चाहिए।

वास्तव में, jQuery ट्यूटोरियल स्पष्ट रूप से कहता है:

जब भी jQuery का उपयोग करते हुए दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) को पढ़ता है या मैनिलेट करता है, तो हमें यह सुनिश्चित करने की ज़रूरत है कि हम इवेंट इत्यादि आदि जोड़ना शुरू कर दें, जैसे ही DOM तैयार हो।

ऐसा करने के लिए, हम दस्तावेज़ के लिए एक तैयार घटना रजिस्टर करते हैं।

 $(document).ready(function() { // do stuff when DOM is ready }); 

वैकल्पिक रूप से आप लघुकथा वाक्यविन्यास का भी उपयोग कर सकते हैं:

 $(function() { // do stuff when DOM is ready }); 

दोनों बराबर हैं

कारण आईडी आधारित चयनकर्ता काम नहीं करते हैं

  1. निर्दिष्ट आईडी वाला तत्व / DOM अभी तक मौजूद नहीं है।
  2. तत्व मौजूद है, लेकिन यह डीओएम में पंजीकृत नहीं है [एजेक्स प्रतिक्रियाओं से गतिशील रूप से जोड़े गए HTML नोड के मामले में]
  3. एक ही आईडी के साथ एक से अधिक तत्व मौजूद है जो एक संघर्ष पैदा कर रहा है।

समाधान की

  1. इसके घोषणा के बाद तत्व का उपयोग करने की कोशिश करें या वैकल्पिक रूप से $(document).ready(); जैसी सामग्री का उपयोग करें $(document).ready();

  2. Ajax प्रतिक्रियाओं से आने वाले तत्वों के लिए, jQuery के .bind() विधि का उपयोग करें। JQuery के पुराने संस्करणों के लिए।

  3. उपकरण का उपयोग करें [उदाहरण के लिए, ब्राउज़र के लिए वेब डेवलपर प्लग इन] डुप्लिकेट आईडी ढूंढने और उन्हें निकालने के लिए।

@ फेलिक्सकलिंग ने बताया कि, सबसे अधिक संभावना यह है कि जो नोड्स आप ढूंढ रहे हैं वह मौजूद नहीं है (अभी तक)।

हालांकि, आधुनिक विकास प्रथाओं अक्सर दस्तावेज के पेड़ के बाहर दस्तावेज तत्वों को हेरफेर कर सकते हैं या तो दस्तावेज़फ़्रेग्मेंट्स के साथ या सीधे विद्यमान तत्वों को फिर से अटैच करना / पुन: ऐसी तकनीकों का उपयोग जावास्क्रिप्ट टेम्पलेटिंग के भाग के रूप में किया जा सकता है या अत्यधिक पुन: पेंट / रिफ्लो संचालन से बचने के दौरान इस्तेमाल किया जा सकता है जबकि प्रश्न के तत्वों को भारी रूप से बदल दिया जा रहा है।

इसी तरह, आधुनिक ब्राउज़रों में नई "शैडो डोम" की कार्यक्षमता जारी की जा रही है, जो तत्वों को दस्तावेज़ का हिस्सा बनने की अनुमति देता है, लेकिन दस्तावेज से पूछताछ-योग्य नहीं है। एटलमेंटबीआईआईडी और उसके सभी भाई-बहन तरीकों (क्वेरी सिलेक्टर, आदि)। यह कार्यक्षमता को समापित करने और विशेष रूप से इसे छुपाने के लिए किया जाता है

फिर भी, हालांकि, यह सबसे अधिक संभावना है कि आप जिस तत्व को ढूंढ रहे हैं वह दस्तावेज़ में (अभी तक) नहीं है, और आपको फेलिक्स के सुझाव के अनुसार करना चाहिए। हालांकि, आपको यह भी अवगत होना चाहिए कि यह एकमात्र कारण नहीं है कि एक तत्व अनिष्ट (या तो अस्थायी या स्थायी रूप से) हो सकता है

यदि आप उपयोग करने का प्रयास कर रहे तत्व iframe अंदर है और आप इसे iframe के संदर्भ के बाहर एक्सेस करने का प्रयास करते हैं तो यह भी विफल हो जाएगा।

यदि आप एक आइफ्रेम में एक तत्व प्राप्त करना चाहते हैं तो आप यहां कैसे पता लगा सकते हैं

मैं बस इस के साथ संघर्ष किया और साझा कर रहा हूँ अगर यह उपयोगी है

यहां तक ​​कि जब मैंने डिबगर का इस्तेमाल किया और पाया कि आइटम क्रम में पहले से ही अस्तित्व में थे, तो कोई स्पष्ट कारण नहीं था कि कंसोल ने एक अपरिभाषित के साथ (और गिर गया)

अंत में मैं कोड की रेखा को फिर से लिखता हूं। मैंने इसे गलत वर्तनी नहीं लिखी थी, लेकिन मुझे लगता है कि मैंने "आईडी" डी का पूंजीकरण किया था। अब यह महान काम करता है।