2011-12-11 15 views
29

संस्करण 1.7 live हटा दिया गया है। on का उपयोग कर उदाहरण निम्नलिखितएकाधिक चयनकर्ताओं पर jQuery() विधि पर jQuery

$('nav, #sb-nav, #help').on('click', 'li', function() { 
    // code... 
}); 

कैसे पुनर्लेखन के लिए:

$('nav li, #sb-nav li, #help li').live('click', function() { 
    // code... 
}); 

on का उपयोग करना:

उदाहरण के बाद नई on विधि के साथ संगत बनाने के लिए आसान है?

$('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function() { 
    // code... 
}); 

उत्तर

62

टिप्पणी प्रति

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function() { 
    // code... 
}); 

.live() $ (दस्तावेज़) के लिए $ ('दस्तावेज़') बदल सिर्फ श्रोता के रूप में दस्तावेज़ बाध्यकारी है।

मेरे दो सेंट हैं कि आप लगभग document से लगभग हमेशा बेहतर श्रोता पा सकते हैं। कम से कम, लगभग सभी पेज मुख्य सामग्री रैपर का उपयोग करते हैं। यह हेडर, पाद लेख, और कभी-कभी साइडबार में श्रोताओं के रूप में नोड्स को समाप्त करता है।

एक प्रतिनिधि समारोह के रूप में .on का उपयोग करने का सबसे अच्छा तरीका निकटतम आम पूर्वज की पहचान करना है जिसे कभी नष्ट नहीं किया जाना चाहिए या अन्यथा घटनाएं अनबाउंड हो सकती हैं। उदाहरण के लिए, यदि आपके पास कोई ऐसा फॉर्म है जो AJAX अनुरोधों द्वारा अपडेट और बदल जाता है, तो श्रोता फॉर्म नोड स्वयं (यदि केवल फॉर्म की सामग्री अपडेट हो) हो या फॉर्म के चारों ओर एक कंटेनर तत्व (आमतौर पर एक div) हो। यदि ऐसा कोई div नहीं है, तो आप इसे हमेशा जोड़ सकते हैं, या आप पेड़ को अगले पूर्वजों तक जा सकते हैं।

[जोड़ने के लिए संपादित:]

प्रदान की विशेष नमूना कोड में, यह वहाँ एक बेहतर श्रोता है कि दोनों #header और भी #sb-sec होते हैं अगर कहने के लिए मुश्किल है। लेकिन कल्पना इन बातों आईडी "mainContainer" के साथ एक पूर्वज का हिस्सा होता है जो आपके और अधिक कुशल कोड बस बाहर श्रोता स्वैप:

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function() { 
    // code... 
}); 
+0

बीटीडब्लू, मैं हमेशा '$ ('दस्तावेज़') के बजाय' $ (दस्तावेज़) 'का उपयोग करता हूं, क्या यह jQuery के लिए अलग है? –

5

आपको लगता है कि आप डोम वस्तु पर घटनाओं को सुन सकते हैं तो .on() उपयोग करने के लिए प्रयास कर रहे हैं जिसे प्रारंभिक .on() कॉल करने के बाद बनाया जा सकता है, तो ऐसा करने का सबसे प्रभावी तरीका मौजूदा माता-पिता ऑब्जेक्ट को ढूंढना है जो नहीं आएगा और जायेगा और आप ईवेंट श्रोताओं को अब बाध्य कर सकते हैं।

.live() सभी श्रोताओं को दस्तावेज़ ऑब्जेक्ट (मास्टर पैरेंट) पर रखें और यदि आपके बहुत सारे श्रोताओं थे तो बहुत अक्षम हो सकते हैं।

.on() आपको यह निर्दिष्ट करने की अनुमति देता है कि वह मूल वस्तु सबसे कुशलता से क्या होगी। इसलिए, यदि आप इन सभी ईवेंट हैंडलर को एक कथन में रखना चाहते हैं और इन '#header .fixed-feedback-bn, # sb-sec .feedback-bn' में कोई सामान्य अभिभावक नहीं है, तो आपको निर्दिष्ट करना होगा दस्तावेज़ के रूप में ग्रेग की तरह माता-पिता लिखा है।

लेकिन, ऐसा करने का एक और अधिक प्रभावी तरीका आवश्यकता के अनुसार इसे अलग करना होगा। उन तत्वों के लिए जिनके पास गतिशील आवश्यकता नहीं है, बस उस तत्व से सीधे बाध्य करें।उदाहरण के लिए #header और # sb-सेकंड इस तरह यह करने के लिए आते हैं, तो यह नहीं है/जाने के लिए और गतिशील व्यवहार की जरूरत नहीं है, तो आप सिर्फ पा सकते हैं सीधे:

$('#header, #sb-sec').on('click', function() { 
    // code here 
}); 

और, तत्वों है कि आप कुछ गतिशील जरूरत के लिए व्यवहार, एक उपयुक्त आम माता-पिता लेने और घटनाओं के लिए पकड़ बिंदु के रूप में आम माता पिता और फिल्टर जो उप तत्वों के लिए आप ईवेंट को सक्रिय करना चाहते हैं के रूप में चयनकर्ता का उपयोग करके इस तरह उस पर हुक के लिए:

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() { 
    // code here 
}); 
+0

सहमत; यदि आपको नष्ट किए जा रहे तत्वों के बारे में चिंता करने की आवश्यकता नहीं है, तो '.on() 'या 'click()' के साथ स्वयं-श्रोता को बाध्यकारी सबसे कुशल है। मैंने एक धारणा की कि अगर उन्हें 'लाइव()' की आवश्यकता होती है तो ऐसा इसलिए था क्योंकि वे अपने श्रोताओं को खोना नहीं चाहते थे, लेकिन शायद यह सही धारणा नहीं थी। –

+0

मैं अनुमान लगा रहा था कि '# हेडर' जैसे कुछ गतिशील रूप से नहीं आ रहे थे और जा रहे थे और गतिशील व्यवहार की आवश्यकता नहीं थी, लेकिन सूची में कुछ शायद ऐसा इसलिए करता है क्योंकि वे' .click() ''clive()' पर क्लिक कर रहे थे। '। किसी भी मामले में, मैंने अभी वर्णन करने की कोशिश की कि आप कैसे निर्णय लेंगे कि '.on() 'का उपयोग करने के विभिन्न तरीकों का चयन कैसे करें। – jfriend00

+0

कोड उदाहरण में '$ ('# हेडर, # एसबी-सेक') नहीं होना चाहिए? अर्थात। एक अल्पविराम के साथ। – mflodin

-2

आप लाइव() के प्रलेखन पर एक नज़र डालना चाहते हैं, स्विच() पर स्विच किया गया है: http://api.jquery.com/live/

+0

डॉक्यूमेंटेशन अधिकांश (नई) चीजों पर बहुत अधूरा है। – Sliq

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