मुझे jQuery के दस्तावेज़ का उपयोग कब करना चाहिए। पहले से ही फ़ंक्शन?

मुझे दस्तावेज़ का उपयोग करने के लिए कहा गया था। पहले से ही जब मैंने पहली बार जावास्क्रिप्ट/jQuery का उपयोग शुरू किया था, लेकिन मैंने कभी नहीं सीखा।मुझे jQuery के दस्तावेज़ का उपयोग कब करना चाहिए। पहले से ही फ़ंक्शन?

क्या कोई jQuery के document.ready के अंदर जावास्क्रिप्ट/jquery कोड को लपेटने के लिए समझ में आता है, तो कुछ बुनियादी दिशानिर्देश प्रदान कर सकता है?

jQuery के .on() विधि:

कुछ विषयों मैं में दिलचस्पी रखता हूँ मैं AJAX के लिए .on() विधि काफ़ी (आमतौर पर डायनामिक रूप से तैयार डोम तत्वों) का उपयोग करें। .on() पर हैंडलर हमेशाdocument.ready पर क्लिक करें?
प्रदर्शन: यह अधिक performant विभिन्न जावास्क्रिप्ट रखने के लिए है/jQuery वस्तुओं के अंदर या बाहर document.ready (भी, प्रदर्शन अंतर महत्वपूर्ण है?)?
ऑब्जेक्ट स्कोप: AJAX- लोड किए गए पृष्ठ के अंदर वाले पृष्ठ तक पहुंच नहीं सकते हैं। पहले से ही सही? वे केवल document.ready (यानी, वास्तव में "वैश्विक" ऑब्जेक्ट्स) के बाहर ऑब्जेक्ट्स तक पहुंच सकते हैं?

अद्यतन: एक सबसे अच्छा अभ्यास मेरे सारे जावास्क्रिप्ट (jQuery पुस्तकालय और मेरी ऐप्लिकेशन के कोड) का पालन करने के लिए, मेरी HTML पृष्ठ के नीचे पर है और मैं jQuery- पर defer विशेषता का उपयोग कर रहा हूँ मेरे AJAX- लोड किए गए पृष्ठों पर स्क्रिप्ट शामिल हैं ताकि मैं इन पृष्ठों पर jQuery लाइब्रेरी तक पहुंच सकूं।

स्रोत

2012-10-25 tim peterson

क्योंकि यदि डोम तैयार नहीं है, तो आपको अप्रत्याशित परिणाम मिल सकते हैं, बस इतना ही। –

2.- ठीक है, मैं ** ** ** का उपयोग केवल डीबग करने के लिए करता हूं और कंसोल द्वारा कुछ var/function को कॉल कर सकता हूं, –

@RobertHarvey किस तरह के "अप्रत्याशित" परिणाम? क्या आप एक उदाहरण प्रदान कर सकते हैं? –

116

सरल शब्दों में पर की all jQuery Methods

पढ़ें एक सूची है

$(document).ready एक घटना है जो ऊपर आग जब document तैयार है।

मान लीजिए आप head अनुभाग में अपने jQuery कोड रखा और एक dom तत्व (एक लंगर, एक img आदि), आप इसे उपयोग करने में सक्षम नहीं होगा का उपयोग करने की कोशिश कर रहा है, क्योंकि html नीचे और ऊपर से व्याख्या की है आपके जब आपका jQuery कोड चलता है तो HTML तत्व मौजूद नहीं होते हैं।

इस समस्या को दूर करने के लिए, हम हर jQuery/जावास्क्रिप्ट कोड $(document).ready समारोह जो जब सभी dom तत्वों पहुँचा जा सकता है कहा जाता हो जाता है अंदर (जो डोम का उपयोग करता है) जगह।

और यह कारण है, जब आप नीचे स्थित अपने jQuery कोड (सभी डोम तत्वों के बाद, बस </body> से पहले), वहाँ के लिए $(document).ready

कोई जरूरत on विधि जगह की कोई जरूरत नहीं है $(document).ready के अंदर केवल on विधि document पर उसी कारण से मैंने ऊपर बताया है।

//No need to put inside $(document).ready 
    $(document).on('click','a',function() { 
    }) 

    // Need to put inside $(document).ready if placed inside <head></head> 
    $('.container').on('click','a',function() { 
    });

संपादित

टिप्पणियों से,

$(document).ready चित्र या स्क्रिप्ट के लिए प्रतीक्षा नहीं करता है। $(document).ready और $(document).load
के बीच बड़ा अंतर है जो केवल डीओएम तक पहुंचने वाला कोड तैयार हैंडलर में होना चाहिए। यदि यह एक प्लगइन है, तो यह तैयार घटना में नहीं होना चाहिए।

स्रोत

2012-10-25 05:46:24 Jashwant

@ डिप्क्स हां, क्यों नहीं?हम '$ (दस्तावेज़) .ready' का उपयोग करने के लिए बहुत उपयोग कर रहे हैं। [यह] देखें (http://jsfiddle.net/GrvwX/) – Jashwant

जब तक आप 'हेड' में jQuery लोड करते हैं और तत्वों को छेड़छाड़ करने के बाद आप स्क्रिप्ट होते हैं, तो 'document.ready' की आवश्यकता नहीं होती है। छवियां एक विशेष मामला है हालांकि ... – elclanrs

+1 अच्छा स्पष्टीकरण! :) – Dipak

.ready() - डीओएम पूरी तरह से लोड होने पर निष्पादित करने के लिए एक फ़ंक्शन निर्दिष्ट करें।

$(document).ready(function() { 
    // Handler for .ready() called. 
});

यहाँ, Introducing $(document).ready()

स्रोत

2012-10-25 05:44:54 Dipak

यथार्थवादी होना करने के लिए, document.ready सही रूप में डोम जोड़ तोड़ से कुछ और के लिए की जरूरत नहीं है और यह हमेशा की जरूरत नहीं है या सबसे अच्छा विकल्प। मेरा मतलब यह है कि जब आप एक बड़ी jQuery प्लगइन विकसित करते हैं उदाहरण के लिए आप इसे पूरे कोड में शायद ही कभी इस्तेमाल करते हैं क्योंकि आप इसे DRY रखने की कोशिश कर रहे हैं, तो आप डीओएम में हेरफेर करने वाले तरीकों में जितना संभव हो उतना सार लगाते हैं लेकिन इन्हें बुलाया जाना है बाद में। जब आपका सभी कोड कड़ाई से एकीकृत होता है तो document.ready में उजागर की गई एकमात्र विधि आमतौर पर init होती है जहां सभी डोम जादू होता है। उम्मीद है कि यह आपके प्रश्न का उत्तर देगा।

स्रोत

2012-10-25 05:47:18 elclanrs

आपको दस्तावेज़ में पहले से ही सभी कार्यों को बांधना चाहिए। क्योंकि आपको दस्तावेज़ पूरी तरह से लोड होने तक प्रतीक्षा करनी चाहिए।

लेकिन, आपको सभी कार्यों के लिए फ़ंक्शन बनाना चाहिए और उन्हें दस्तावेज़ के भीतर से कॉल करना चाहिए। पहले से ही। जब आप फ़ंक्शन (अपनी वैश्विक ऑब्जेक्ट्स) बनाते हैं, तो जब चाहें उन्हें कॉल करें। तो एक बार आपका नया डेटा लोड हो जाने और नए तत्व बनाए जाने के बाद, उन कार्यों को दोबारा कॉल करें।

ये फ़ंक्शंस वे हैं जहां आपने ईवेंट और एक्शन आइटम को बाध्य किया है।

$(document).ready(function(){ 
bindelement1(); 
bindelement2(); 
}); 

function bindelement1(){ 
$('el1').on('click',function...); 
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again 
} 

function bindelement2(){ 
$('el2').on('click',function...); 
}

स्रोत

2012-10-25 05:47:48

उत्तर:

jQuery के .on() विधि: मैं AJAX के लिए .on() विधि का उपयोग काफ़ी (गतिशील बनाने डोम तत्व)। .on() हैंडलर पर क्लिक करें हमेशा document.ready के अंदर हो?

नहीं, हमेशा नहीं। यदि आप दस्तावेज़ जेएस में अपना जेएस लोड करते हैं तो आपको इसकी आवश्यकता होगी। यदि आप AJAX के माध्यम से पृष्ठ लोड के बाद तत्व बना रहे हैं, तो आपको इसकी आवश्यकता होगी। आपको स्क्रिप्ट उस HTML तत्व से नीचे होने की आवश्यकता नहीं होगी जब आप एक हैंडलर भी जोड़ रहे हों।

प्रदर्शन: यह अधिक performant विभिन्न जावास्क्रिप्ट रखने के लिए है/jQuery वस्तुओं के अंदर या बाहर document.ready (भी, प्रदर्शन अंतर महत्वपूर्ण है?)?

यह निर्भर करता है। हैंडलर को संलग्न करने में उतना ही समय लगेगा, यह केवल तभी निर्भर करता है जब आप पृष्ठ को लोड होने के तुरंत बाद ऐसा करना चाहते हैं या यदि आप पूरे दस्तावेज़ को लोड होने तक प्रतीक्षा करना चाहते हैं। तो यह इस बात पर निर्भर करेगा कि आप पेज पर अन्य चीजें क्या कर रहे हैं।

वस्तु गुंजाइश: AJAX-लोड किए गए पृष्ठ वस्तुओं कि अंदर पहले पेज के document.ready थे, सही उपयोग नहीं कर सकते? वे केवल ऑब्जेक्ट्स तक पहुंच सकते हैं जो दस्तावेज़ के बाहर थे। पहले (यानी, वास्तव में "वैश्विक" ऑब्जेक्ट्स)?

यह अनिवार्य रूप से यह की अपनी समारोह तो यह केवल पहुँच वार्स एक वैश्विक गुंजाइश पर घोषित कर सकते हैं (बाहर/सभी कार्यों ऊपर) या window.myvarname = '';

स्रोत

2012-10-25 05:51:56 Justin

साथ इससे पहले कि आप सुरक्षित रूप से jQuery का उपयोग कर सकते हैं सुनिश्चित करने की आवश्यकता पेज है कि एक राज्य में जहां तैयार का उपयोग किया जा सकता है। JQuery के साथ, हम इसे हमारे कोड को फ़ंक्शन में डालकर पूरा करते हैं, और फिर उस फ़ंक्शन को $(document).ready() पर पास कर देते हैं। हमारे द्वारा पारित कार्य केवल anonymous function हो सकता है।

$(document).ready(function() { 
    console.log('ready!'); 
});

यह उस कार्य को चलाएगा जिसे हम पास करते हैं। पहले() दस्तावेज़ तैयार होने के बाद। यहाँ क्या चल रहा है? हम अपने पृष्ठ के दस्तावेज़ से एक jQuery ऑब्जेक्ट बनाने के लिए $ (दस्तावेज़) का उपयोग कर रहे हैं, और फिर उस ऑब्जेक्ट पर .ready() फ़ंक्शन को कॉल कर रहे हैं, इसे उस फ़ंक्शन को पास कर रहे हैं जिसे हम निष्पादित करना चाहते हैं।

चूंकि यह कुछ है जो आप स्वयं को बहुत कुछ कर पाएंगे, इसके लिए यदि आप चाहें तो इसके लिए एक शॉर्टंड विधि है - $() फ़ंक्शन $ (दस्तावेज़) के लिए उपनाम के रूप में डबल ड्यूटी करता है। पहले() यदि आप पास करते हैं यह एक समारोह: Jquery Fundamentals

स्रोत

2012-10-25 06:03:02

'(फ़ंक्शन ($) {}) (jQuery) के साथ भ्रमित नहीं होना चाहिए; 'जो आपके कोड को लपेटता है ताकि $ jQuery उसमें jQuery हो समापन –

-2

तैयार घटना होती है वह जब डोम (दस्तावेज़ ऑब्जेक्ट मॉडल) लोड किया गया है:

$(function() { 
    console.log('ready!'); 
});

यह एक अच्छा पढ़ने है।

क्योंकि यह घटना दस्तावेज़ तैयार होने के बाद होती है, यह अन्य सभी jQuery घटनाओं और कार्यों के लिए एक अच्छी जगह है। उपरोक्त उदाहरण में पसंद है।

तैयार() विधि निर्दिष्ट करती है कि एक तैयार घटना होने पर क्या होता है।

युक्ति: तैयार() विधि का साथ उपयोग नहीं किया जाना चाहिए।

स्रोत

2015-01-19 08:35:22

मैंने एक div के लिए एक लिंक जोड़ा और क्लिक पर कुछ कार्य करना चाहता था। मैंने डीओएम में संलग्न तत्व के नीचे कोड जोड़ा लेकिन यह काम नहीं किया। यहां कोड है:

<div id="advance-search"> 
    Some other DOM elements 
    <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>--> 
</div> 

<script> 
    $("#advance-search #reset-adv-srch").on("click", function(){ 
    alert('Link Clicked');`` 
    }); 
</script>

यह काम नहीं किया। फिर मैंने jQuery कोड को $ (दस्तावेज़) के अंदर रखा। पहले से ही और यह पूरी तरह से काम किया। यही पर है।

$(document).ready(function(e) { 
    $("#advance-search #reset-adv-srch").on("click", function(){ 
     alert('Link Clicked'); 
    }); 
});

स्रोत

2017-09-25 06:37:09

मुझे jQuery के दस्तावेज़ का उपयोग कब करना चाहिए। पहले से ही फ़ंक्शन?

उत्तर

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