1. घर
  2. सवाल और जवाब
  3. $ .click() $ (दस्तावेज़) .ready() के भीतर क्यों होना चाहिए?

$ .click() $ (दस्तावेज़) .ready() के भीतर क्यों होना चाहिए?

2012-04-10 12 views
13

मैं http://docs.jquery.com/How_jQuery_Works के माध्यम से जा रहा हूं और ईवेंट को $(document).ready() में थोड़ा अजीब भी संलग्न करने की आवश्यकता पाता हूं।

  • जब दस्तावेज़ लोड होने, नियंत्रण $(document).ready() समारोह में प्रवेश करेंगे, लेकिन यह $.click() निष्पादित करने के लिए आगे बढ़ना होगा: मेरी कठिनाइयों इस प्रकार हैं? (व्यवहार के आधार पर यह नहीं होगा। लेकिन जब नियंत्रण सामान्य कार्य में प्रवेश करता है, तो यह $.click() फ़ंक्शन क्यों दर्ज नहीं करेगा?)
  • चूंकि उपयोगकर्ता दस्तावेज़ तैयार होने के बाद ही यूआरएल देख सकता है, क्या यह वास्तव में आवश्यक है को $(document).ready() के भीतर एम्बेड करने के लिए?

स्रोत

2012-04-10 Rajkumar Masaniayan

उत्तर

19

How jQuery Works document एक .click()$(document).ready() के अंदर बंधन निश्चित होने के लिए उस तत्व जो .click() घटना ही है जब फ़ंक्शन निष्पादित बना दिया गया है के उदाहरण का उपयोग करता है।

.click() अपने पैरामीटर के रूप में एक समारोह के साथ बुलाया अपने पहले चयनकर्ता मिलान नोड्स पर .click() निष्पादित नहीं करता, बल्कि करने के लिए समारोह बांधता मिलान नोड्स 'onclick।

आप इस तरह कुछ करने के लिए प्रयास करने के लिए थे, तो: ...

$('a').click(function(){ 
    alert('clicked me'); 
});

दस्तावेज़ में <head> या पहले किसी भी <a> तत्व प्रदान किया गया था, घटना किसी भी नोड के लिए कोई नोड के बाद से बाध्य नहीं होगा फ़ंक्शन निष्पादित होने पर $('a') चयनकर्ता से मेल खाता था।

इसके अलावा, यदि आपने ऐसा किया है तो कुछ <a> टैग बनाए गए थे, केवल पहले से बनाए गए लोगों को बाध्य घटना मिल जाएगी। <a> फ़ंक्शन बाध्य होने के बाद बनाए गए टैग .click() बाध्यकारी नहीं होंगे।

तो jQuery (और अन्य जावास्क्रिप्ट चौखटे) में, आप अक्सर, आदि ईवेंट हैंडलर्स जोड़ने, बंधन विजेट, एक $(document).ready(function(){});

स्रोत

2012-04-10 16:38:06

1

अंदर के सम्मेलन देखेंगे हाँ, आप सुनिश्चित करने की आवश्यकता है कि DOM एलीमेंट का जिसे आप क्लिक हैंडलर जोड़ रहे हैं, मौजूद है, जिसे आप दस्तावेज द्वारा तैयार कर रहे हैं।

स्रोत

2012-04-10 16:38:26 Maess

+1

ऐसा लगता है कि किसी ने मुझे 1 9 सेकेंड तक हराया :) – Maess

5

यह .click() पर वास्तविक कॉल नहीं है, जो यहां चिंता का विषय है, बल्कि तत्व के लिए चयनकर्ता जिस पर इसे कहा जाता है।

उदाहरण के लिए, अगर वहाँ id="myButton" साथ एक तत्व है तो आप इसके साथ संदर्भ होगा:

$('#myButton')

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

आप अन्य दृष्टिकोणों का उपयोग कर सकते हैं, such as the jQuery .on() function, जो सामान्य अभिभावक तत्वों को ईवेंट बाध्य कर सकते हैं और बाद में दस्तावेज़ के जीवन में जोड़े गए लोगों से "बुलबुले अप" ईवेंट फ़िल्टर कर सकते हैं। लेकिन यदि आप केवल एक सामान्य चयनकर्ता का उपयोग कर रहे हैं और फ़ंक्शन को कॉल कर रहे हैं तो फ़ंक्शन को कुछ भी करने के लिए चयनकर्ता को DOM के भीतर कुछ खोजने की आवश्यकता है।

स्रोत

2012-04-10 16:40:45 David

0

जावास्क्रिप्ट आमतौर पर जैसे ही टैग पढ़ा जाता है, निष्पादन शुरू होता है। इसका मतलब यह है कि सिर में स्क्रिप्ट डालने के मानक अभ्यास में, आपके लिए क्लिक हैंडलर को बाध्य करने के लिए अभी तक कोई तत्व नहीं बनाया गया है। यहां तक ​​कि शरीर तत्व अभी तक मौजूद नहीं है। JQuery.ready का उपयोग करके आपके कोड को निष्पादित करने में देरी हो जाती है जब तक कि सभी डोम तत्व लोड नहीं हो जाते हैं।

स्रोत

2012-04-10 16:41:03

1

समस्या $(document).ready(..) विधि हल करने का प्रयास कर रही है पृष्ठ के लिए जावास्क्रिप्ट कोड के निष्पादन और उस समय जिस पर पृष्ठ में नियंत्रण बाध्य हैं, के बीच तनाव है। दस्तावेज तैयार होने के बाद ready फ़ंक्शन आग लग जाएगा और डीओएम तत्व उपलब्ध होंगे इसलिए जावास्क्रिप्ट कोड डीओएम

के बारे में उचित धारणाएं कर सकता है सबसे आम उदाहरण यह है कि डीओएम तत्वों के संबंध में जावास्क्रिप्ट कोड का स्थान यह संचालित करने की कोशिश कर रहा है पर।

<script> 
$('#target').click(function() { 
    alert('It was clicked'); 
}); 
</script> 
<div id="target">Click Me</div>

इस विशेष उदाहरण में जावास्क्रिप्ट इरादे के अनुसार काम नहीं करेगा। जब स्क्रिप्ट ब्लॉक दर्ज किया जाता है click लाइन चलाया जाता है और वर्तमान में आईडी target आईडी के साथ कोई DOM तत्व नहीं है, इसलिए हैंडलर कुछ भी नहीं बांधता है। कोड के साथ वास्तव में कुछ भी गलत नहीं है, डीओएम तत्व बनने से पहले इसे चलाने के लिए दुर्भाग्यपूर्ण समय था।

इस उदाहरण में समस्या स्पष्ट है क्योंकि कोड और डीओएम तत्व को दृष्टि से जोड़ा जाता है। अधिक जटिल वेब पृष्ठों में हालांकि जावास्क्रिप्ट अक्सर पूरी तरह से अलग फ़ाइल में होता है और लोड ऑर्डरिंग के बारे में कोई दृश्य गारंटी नहीं होती है (न ही इसे चाहिए)। $(document).ready(..) अमूर्तता का उपयोग समस्याओं के संभावित स्रोत के रूप में आदेश देने के प्रश्न को हटा देता है और चिंताओं के उचित पृथक्करण की सुविधा प्रदान करता है

स्रोत

2012-04-10 16:43:22 JaredPar

संबंधित मुद्दे

 संबंधित मुद्दे