jQuery .live() और .on()

Question

के बीच क्या अंतर है, मुझे लगता है कि jQuery 1.7 में .on() एक नई विधि है जो पिछले संस्करणों में .live() को प्रतिस्थापित करती है।

मुझे उनके बीच का अंतर जानने में रुचि है और इस नई विधि का उपयोग करने के क्या फायदे हैं।

Answer 1

docs में यह बहुत स्पष्ट है कि आप लाइव का उपयोग क्यों नहीं करना चाहते हैं। फेलिक्स द्वारा वर्णित अनुसार, .on घटनाओं को जोड़ने का एक और अधिक सुव्यवस्थित तरीका है। विधि .live() की

उपयोग नहीं रह गया है की सिफारिश की है के बाद से jQuery के बाद के संस्करणों बेहतर तरीकों इसके कमियां नहीं है प्रदान करते हैं। .live() विधि है, जो समय लेने वाली बड़ी दस्तावेजों पर हो सकता है कॉल करने से पहले

• jQuery तत्वों चयनकर्ता द्वारा निर्दिष्ट पुनः प्राप्त करने का प्रयास करता है: विशेष रूप से, निम्न समस्याओं .live() के उपयोग के साथ उत्पन्न होती हैं।
• चेनिंग विधियों का समर्थन नहीं है। उदाहरण के लिए, $("a").find(".offsite, .external").live(...); मान्य नहीं है और अपेक्षित कार्य नहीं करता है।
• चूंकि सभी .live()document तत्व पर ईवेंट संलग्न होते हैं, इसलिए ईवेंट को संभालने से पहले सबसे लंबा और धीमा संभव पथ लेता है।
• कॉलिंग event.stopPropagation() इवेंट हैंडलर में ईवेंट हैंडलर को दस्तावेज़ में कम संलग्न करने में अप्रभावी है; घटना पहले ही document पर प्रचारित हो चुकी है।
• .live() विधि तरीके कि आश्चर्य की बात हो सकती है, उदा अन्य घटना के तरीकों के साथ सूचना का आदान प्रदान, $(document).unbind("click") सभी क्लिक संचालकों .live() के लिए किसी भी कॉल द्वारा संलग्न को हटा!

Answer 2

official Blog

[..] नई .on() और .off() एपीआई एक दस्तावेज़ में घटनाओं संलग्न jQuery में के सभी तरीके को एकजुट देखें - और वे कम कर रहे हैं टाइप करने के लिए ! [...]

Answer 3

Good tutorial on difference between on vs live

ऊपर के लिंक से उद्धरण

क्या .live() के साथ कुछ गलत है

विधि .live() की

उपयोग नहीं रह गया है बाद में के बाद से सिफारिश की है jQuery के संस्करण बेहतर तरीके प्रदान करते हैं जिनके पास दोष नहीं हैं।

1. jQuery चयनकर्ता द्वारा निर्दिष्ट तत्वों कॉल करने से पहले फिर से प्राप्त करने का प्रयास करता है: विशेष रूप से, निम्न समस्याओं .live() के उपयोग के साथ उत्पन्न होती हैं।लाइव() विधि, जो बड़े दस्तावेज़ों पर समय लेने वाली हो सकती है।
2. चेनिंग विधियों का समर्थन नहीं है। उदाहरण के लिए, $ ("ए")। ढूंढें ("ऑफसाइट, .external")। लाइव (...); मान्य नहीं है और अपेक्षित काम नहीं करता है।
3. चूंकि सभी .live() घटनाएं दस्तावेज़ तत्व पर संलग्न होती हैं, इसलिए ईवेंट को संभालने से पहले सबसे लंबा और धीमा संभव पथ लेता है।
4. घटना में कॉलिंग event.stopPropagation() कॉलिंग दस्तावेज़ में कम से कम ईवेंट हैंडलर को रोकने में अप्रभावी है; घटना पहले से ही दस्तावेज के लिए प्रचारित है।
5. .live() विधि है कि हो सकता है आश्चर्य की बात है, जैसे, $ (दस्तावेज़) .unbind ("क्लिक") सभी क्लिक हटाता संचालकों किसी भी कॉल द्वारा संलग्न .live करने के तरीके में अन्य घटना के तरीकों के साथ सूचना का आदान प्रदान() !

Answer 4

मैं एक Chrome एक्सटेंशन "Comment Save" जो jQuery का उपयोग करती है, और एक जो .live() इस्तेमाल किया के लेखक हूँ। विस्तार का तरीका सभी श्रोताओं का उपयोग करके श्रोता को जोड़कर होता है। live() - जब भी दस्तावेज़ बदल जाता है तब से यह अच्छी तरह से काम करता है, यह अभी भी श्रोता को सभी नए टेक्स्टरेज़ से जोड़ देगा।

मैं .on() पर स्थानांतरित हो गया लेकिन यह भी काम नहीं करता है। जब भी दस्तावेज़ बदलता है तो यह श्रोता को संलग्न नहीं करता है - इसलिए मैंने .live() का उपयोग करने के लिए वापस लौटा दिया है। यह एक बग है जो मुझे लगता है .on() में। मुझे लगता है कि बस इसके बारे में सावधान रहें।

Answer 5

एक अंतर यह है कि लोगों को जब .live() से .on() में जाने पर ठोकर कि .on() के लिए मानकों थोड़ा अलग है जब डोम के लिए गतिशील रूप से जोड़ा तत्वों को घटनाओं बाध्यकारी हो रहा है।

यहाँ वाक्य रचना हम .live() विधि के साथ उपयोग करने के लिए प्रयोग किया जाता का एक उदाहरण है:

$('button').live('click', doSomething); 

function doSomething() { 
    // do something 
} 

.live() साथ

अब jQuery संस्करण 1.7 में पदावनत और संस्करण 1.9 में हटाया जा रहा है, तो आप .on() विधि का उपयोग करना चाहिए।

$(document).on('click', 'button', doSomething); 

function doSomething() { 
    // do something 
} 

कृपया ध्यान दें कि हम दस्तावेज़ के बजाय बटन ही के खिलाफ .on() कॉल कर रहे हैं: यहाँ एक बराबर उदाहरण .on() विधि का उपयोग कर रहा है। हम तत्व के लिए चयनकर्ता निर्दिष्ट करते हैं जिनकी घटनाओं को हम दूसरे पैरामीटर में सुन रहे हैं।

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

यह here in the documentation समझाया गया है लेकिन यह याद करना काफी आसान है।

Answer 6

मुझे ब्राउज़र बंद ईवेंट की पहचान करने की आवश्यकता है। शोध करने के बाद मैं jQuery 1.8 का उपयोग कर निम्नलिखित कर रहा हूं।jQuery निम्नलिखित ('एक') जब हाइपरलिंक पर क्लिक

$ एक ध्वज का उपयोग पर 3

1. बारी रहते हैं ('क्लिक', function() {cleanSession = false;})। एक झंडा निम्नलिखित jQuery का उपयोग करने पर

2. बारी जब किसी भी समय प्रस्तुत के इनपुट बटन प्रकार क्लिक किया जाता है

$ ("इनपुट [प्रकार = प्रस्तुत]")। रहते हैं ('क्लिक', समारोह() {अलर्ट ('इनपुट बटन क्लिक किया गया'); cleanSession = false;}); एक झंडा निम्नलिखित jQuery का उपयोग करते समय किसी भी समय प्रपत्र सबमिट पर

1. बारी होता

$ ('फॉर्म') रहते हैं ('प्रस्तुत', function() {cleanSession = false;})।

अब महत्वपूर्ण बात ... मेरा समाधान केवल तभी काम करता है जब मैं इसका उपयोग करता हूं। बजाय। अगर मैं .on का उपयोग करता हूं तो फॉर्म जमा होने के बाद ईवेंट निकाल दिया जाता है और जो बहुत देर हो चुकी है। कई बार मेरे फॉर्म जावास्क्रिप्ट कॉल (document.form.submit)

का उपयोग करके सबमिट किए जाते हैं तो .live और .on के बीच एक महत्वपूर्ण अंतर है। आप .live का उपयोग करते हैं तो आपके ईवेंट तुरंत निकाल दिया लेकिन यदि आप इसे .on करने के लिए स्विच अधिक जानकारी के लिए समय

Answer 7

पर निकाल दिया नहीं है कि यह बाहर की जाँच .. .live() और .on()

.live() विधि है जब आप गतिशील पीढ़ी की सामग्रियों से निपटते हैं ... जैसे मैंने प्रोग्राम पर बनाया है जो एक टैब जोड़ता है जब मैं एक jquery स्लाइडर का मान बदलता हूं और मैं उत्पन्न होने वाले प्रत्येक टैब पर बंद बटन कार्यक्षमता संलग्न करना चाहता हूं ... कोड मैं कोशिश की है है ..

var tabs = $('#tabs').tabs(); 
             // live() methos attaches an event handler for all 
             //elements which matches the curren selector 
     $("#tabs span.ui-icon-close").live("click", function() { 


      // fetches the panelId attribute aria-control which is like tab1 or vice versa 
      var panelId = $(this ).closest("li").remove().attr("aria-controls"); 
      $("#" + panelId).remove(); 
      tabs.tabs("refresh"); 
     }); 

और यह प्रीति बहुत शांत काम करता है ...

Answer 8

.live() 

इस विधि का उपयोग उन सभी तत्वों के लिए एक ईवेंट हैंडलर को संलग्न करने के लिए किया जाता है जो वर्तमान चयनकर्ता से मेल खाते हैं, भविष्य में और भविष्य में।

$("#someid").live("click", function() { 
    console.log("live event."); 
}); 

और

.on() 

इस विधि नीचे चयनित तत्वों उदाहरण है करने के लिए एक या अधिक घटनाओं के लिए एक ईवेंट हैंडलर समारोह संलग्न करने के लिए प्रयोग किया जाता है।

$("#someid").on("click", function() { 
    console.log("on event."); 
});