2012-04-02 39 views
25

करता है के बाद से लाइव() विधि संस्करण 1.7 के रूप में हटा दिया गया है, मैं अपने स्रोत से गुजर रही शुरू कर दिया और पर करने के लिए पर मेरे लाइव ईवेंट हैंडलर्स के सभी परिवर्तित()। मैं इस धारणा के तहत था कि परिवर्तन सरल होगा और सब कुछ पहले जैसा काम करेगा; हालांकि, मैं कुछ कोड में भाग गया जो इस तरह व्यवहार नहीं करता है।jQuery .on काम नहीं करता है, लेकिन .live

मैं

$('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
} 

निम्नलिखित jQuery एक मेज टैग की क्लिक करें घटना बाध्य करने के लिए चयन किया है ... ... और यह सिर्फ ठीक काम करता है (यानी - मेरी मेज टैग क्लिक करें घटना अतुल्यकालिक के बाद भी उठाया है पृष्ठ पर पोस्टबैक होते हैं)। लेकिन फिर क्लिक करें घटना नहीं रह गया है उठाया है कि अगर मैं निम्नलिखित

$('table.accordion-header').on("click", function ($e) { 
    // gobs of code 
} 

करने के लिए कोड बदलने के पृष्ठ पर किसी भी अतुल्यकालिक Postbacks होने के बाद। कृपया ध्यान दें - क्लिक करें घटना किसी भी अतुल्यकालिक Postbacks, अप करने के लिए काम करता है, लेकिन बाद में यह अब काम करता है। तो मैं यहाँ क्या याद कर रहा हूँ?

+0

चेक अगर आपको लगता है कि एक "$ (document) .ready()" समारोह प्रकार के अंदर या यदि आप इसे से पहले बुला नहीं कर रहे हैं और झूठे लौटने डाल दिया। जांचने का एक तरीका है: $ ('table.accordion-header')। ट्रिगर ('क्लिक करें'); –

उत्तर

48

$('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
}); 

के बराबर

$(document).on("click", 'table.accordion-header', function ($e) { 
    // gobs of code 
}); 
+4

लेकिन, क्या तुम सच में समझ कैसे '.on()' काम करता है और यह कैसे इस्तेमाल किया जाना चाहिए, वहाँ 'का उपयोग कर $ (दस्तावेज़) .on की तुलना में यह उपयोग कर के और अधिक कुशल तरीके हैं अगर()'। एक प्रमुख कारण '.live()' प्रतिस्थापित किया गया था ताकि लोगों को इससे अधिक कुशल उपयोग करने की अनुमति मिल सके। मेरा उत्तर नीचे अधिक जानकारी प्रदान करता है। – jfriend00

+0

हाँ, वास्तव में .. मैं केवल क्या ओपी प्रदान की साथ काम कर रहा था ... वहाँ भी था '.delegate()' बेहतर नियंत्रण के लिए ... –

+0

आप तत्व के लिए एक आईडी का उपयोग कर रहे हैं, तो आप पर जोड़ें पर क्लिक कर रहे हैं वाक्य रचना के लिए "#" $ (दस्तावेज़) .on ("क्लिक", '#id_of_the_element', समारोह ($ ई) { // कोड के gobs }); –

53

इस तरह सवाल कई, कई बार जवाब दिया गया है के रूप में यह काफी आम है कि लोग काफी .on() की कैसे गतिशील संस्करण समझ में नहीं आता है काम करता है। आप .on() के स्थिर रूप जहां किसी चीज़ बार जब आप .on() फोन मौजूद होना चाहिए का उपयोग कर रहे हैं जब आप शायद इस तरह .on() के गतिशील प्रपत्र का उपयोग किया जा करने का इरादा:

$(someStaticParentObject).on("click", 'table.accordion-header', function ($e) { 
    // code 
} 

.live().on() से बदला गया क्योंकि .on() आप की अनुमति देता है गतिशील वस्तु की एक स्थिर पैरेंट ऑब्जेक्ट को निर्दिष्ट ईवेंट हैंडलर संलग्न करने के लिए है कि और अधिक कुशल है करके बेहतर प्रदर्शन करने के लिए उस document वस्तु है जो .live() किया के साथ जोड़ते। मैं तुम्हें इन पिछले जवाब (सब मेरे द्वारा लिखित) को पढ़ने के बारे में कैसे करने के लिए सबसे अच्छा .on() का उपयोग अधिक समझने के लिए सुझाव है।

jquery: on vs live

Does jQuery.on() work for elements that are added after the event handler is created?

How does jQuery's new on() method compare to the live() method in performance?

What's the difference between jQuery.bind() and jQuery.on()?

Why not take Javascript event delegation to the extreme?

+0

आपने उल्लेख किया है कि एक स्थिर तत्व को जोड़ना दस्तावेज़ से बेहतर है। हालांकि, अगर आप एक विशिष्ट माता-पिता को नहीं जानते हैं तो '$ (' body ') का उपयोग करने के फायदे क्या हैं।' बनाम '$ (दस्तावेज़) .on' पर? –

+0

@PaulAlexander - सबसे पहले, आपको '$ (document.body)' से '$ (दस्तावेज़) 'की तुलना करनी चाहिए। मैं हमेशा डीओएम पदानुक्रम में सबसे कम चुनता हूं जो आप कर सकते हैं (दस्तावेज.इस मामले में कोई भी व्यक्ति), लेकिन व्यावहारिक रूप से यह संभवतः उन दोनों के बीच बहुत अंतर नहीं करता है। – jfriend00

+0

@ jfriend00, कई मामलों में, 'दस्तावेज़' से जुड़ना एकमात्र संभावना है क्योंकि डीओएम में लोड होने के कारण कोई अन्य वस्तु मौजूद नहीं है (पेज लोड)। – md1337

0
: ये जवाब भी सबसे कारगर तरीका .on() उपयोग करने के लिए और यह कैसे काम करता का एक संक्षिप्त विवरण के बारे में टिप्पणी भी शामिल

jQuery 1.7.2 स्रोत में, "लाइव" काफी "इंगित" है, इसलिए यह समस्या शायद "चालू" फ़ंक्शन से संबंधित नहीं है। इसे अस्वीकार करने की जरूरत है। के लिए चयनकर्ता एक मुद्दा हो सकता है।

jQuery स्रोत:

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
}, 
+0

यदि आप इस कोड पर अधिक बारीकी से देखते हैं और अन्य उत्तरों को पढ़ते हैं, तो आप देखेंगे कि समस्या यह है कि वे '.live()' के समकक्ष गलत स्थान पर चयनकर्ता '' table.accordion-header'' डाल रहे हैं। '.on()'। – jfriend00

+0

मैं जो कुछ कह रहा हूं वह यह है कि, "लाइव" और "ऑन" वही हैं और "लाइव" अंक "चालू" हैं। यह एक चयनकर्ता मुद्दा है, न जीना और न ही। –

+0

मूल प्रश्न में जब आप मेरे उत्तर को अन-उपयोगी के रूप में चिह्नित करना चाहते हैं, तो पोस्टर ने माना कि इस पर लाइव बदलना मुद्दा था। मुझे यह इंगित करना पड़ा कि == लाइव पर और दोनों की अपनी मूल गलतफहमी को रद्द करने का सुझाव था। –

0

मैं अपने को लाइव() के लिए पर (अपडेट करने का प्रयास में समस्या आई) भी लेकिन अंत में यह मिल गया जब किसी ने मुझसे कैसे पहले माता-पिता या संदर्भ चयनकर्ता काम करता है पता चला है।कुंजी यह सुनिश्चित कर रही है कि यह पहला तत्व दस्तावेज़ ऑब्जेक्ट मॉडल में है।

तरह से $ (this) .on साथ काम करता है() या तो स्पष्ट नहीं है।

$(document).on("click", 'table.accordion-header', function ($e) { 
    // gobs of code 
}); 
('table.accordion हेडर') और नहीं $ (दस्तावेज़) अपने कार्य कोड में $ (this) ऊपर दिए गए $ को उल्लेख करता है के रूप में आप उम्मीद कर सकते उदाहरण में

इसके अलावा यहां स्पष्टीकरण: .on() with $(this)

0

सबसे अच्छा तरीका है मैं रख सकते हैं इस दस्तावेज़ की तरह ही jQuery से .live() और .on() कार्यक्षमता पर कहते है:

  1. अपने चयनकर्ता "$ (चयनकर्ता)" में में फेंक एक ठोस तत्व जो पृष्ठ के साथ लोड होता है - गतिशील रूप से नहीं।
  2. तो तरीका है, जहां "चयनकर्ता" इंगित किया गया है में माध्यमिक चयनकर्ता जगह - यह एक गतिशील बनाया जा सकता है।
//so this.. 
    $('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
}); 

//becomes this.. 
    $('table').on("click",'.accordion-header', function ($e) { 
    // gobs of code 
}); 

यह मानते हुए कि "तालिका" निश्चित रूप से पृष्ठ के साथ भरी हुई है।

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