JQuery .live () और .on () के बीच क्या अंतर है

Question

मैं देखता हूं .on()कि jQuery 1.7 में एक नई विधि है .live()जो पहले के संस्करणों में बदल जाती है।

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

Answer 1

डॉक्स में यह बहुत स्पष्ट है कि आप लाइव का उपयोग क्यों नहीं करना चाहेंगे। जैसा कि फेलिक्स ने उल्लेख किया है, .onघटनाओं को संलग्न करने का एक अधिक कारगर तरीका है।

.Live () विधि का उपयोग अब अनुशंसित नहीं है क्योंकि jQuery के बाद के संस्करण बेहतर तरीके प्रदान करते हैं जिनमें इसकी कमियां नहीं हैं। विशेष रूप से, .live () के उपयोग के साथ निम्नलिखित समस्याएं उत्पन्न होती हैं:

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

Comments

बस सोच रहा था, अगर यह बात है कि वे विधि पर एक नया बनाने के बजाय लाइव विधि में सुधार क्यों नहीं करते हैं। जब तक जीना है कुछ कर सकते हैं पर नहीं?

— neobie

@neobie, अपने कोड को और अधिक सार्थक बनाने के लिए, और इसमें एकरूपता है

— ओम शंकर

@neobie: मुझे लगता है कि यह पश्चगामी संगतता बनाए रखने के लिए है। इस उत्तर में बताए गए अंतर बताते हैं कि उनका व्यवहार थोड़ा अलग है। यदि live()इसके व्यवहार को संशोधित किया गया था on(), तो यह मौजूदा कोड को तोड़ सकता है। JQuery के लोगों ने दिखाया है कि वे जरूरी तौर पर "ब्रेकिंग" विरासत कोड से डरते नहीं हैं, लेकिन मुझे लगता है कि इस मामले में, उन्होंने फैसला किया कि इससे रिग्रेशन शुरू करने का जोखिम नहीं है।

— रिनोगो

लगता है कि ऐसा ही है। live()1.7 में हटा दिया गया था और 1.9 में हटा दिया गया था। api.jquery.com/live

— rinogo

Answer 2

एक अंतर जिसे लोग चलते समय रोकते हैं .live(), .on()वह यह है कि .on()तत्वों को बांधने के लिए मापदंडों को थोड़ा अलग किया जाता है जब DOM में तत्वों को जोड़ा जाता है।

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

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

function doSomething() {
    // do something
}

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

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

function doSomething() {
    // do something
}

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

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

यह यहाँ प्रलेखन में समझाया गया है, लेकिन इसे याद करना काफी आसान है।

Answer 3

आधिकारिक ब्लॉग देखें

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

Answer 4

.live()

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

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

तथा

.on()

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

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

Answer 5

बनाम लाइव के बीच अंतर पर अच्छा ट्यूटोरियल

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

क्या गलत है .live ()

.Live () विधि का उपयोग अब अनुशंसित नहीं है क्योंकि jQuery के बाद के संस्करण बेहतर तरीके प्रदान करते हैं जिनमें इसकी कमियां नहीं हैं। विशेष रूप से, .live () के उपयोग के साथ निम्नलिखित समस्याएं उत्पन्न होती हैं:

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

Answer 6

अधिक जानकारी के लिए इसे देखें .. .live () और .on ()

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

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" );
        });

और यह बहुत अच्छा काम करता है ...

Comments

एसओ में आपका स्वागत है। आनंद आपके उत्तरों के बारे में विस्तार से बताने की कोशिश करते हैं और केवल लिंक प्रदान नहीं करते हैं, लिंक-केवल उत्तरों को यहां बुरा अभ्यास माना जाता है।

— माता

धन्यवाद .. मैं इसे भविष्य के उत्तर के लिए अपने दिमाग में रखूंगा .. :)

— हिरेन

Answer 7

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

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

Comments

आपको इसका गलत उपयोग करना चाहिए - यह .live()विधि के लिए थोड़ा अलग सिंटैक्स है । बराबर .on()के लिए $('p').live('click', function () { alert('clicked'); });है $(document).on('click', 'p', function () { alert('clicked'); });। ध्यान दें कि आप उस .on()विधि का उपयोग करते हैं documentऔर फिर उस तत्व को निर्दिष्ट करते हैं जिसे आप इवेंट हैंडलर को उसके दूसरे पैरामीटर में सुनने के लिए संलग्न करना चाहते हैं।

— अंजबिवेन

आप इस यहाँ के बारे में अधिक पढ़ सकते हैं: api.jquery.com/on । हेडिंग डायरेक्ट और

— डेलीगेटेड

मैं इस लेख को पढ़ने का सुझाव भी दूंगा

— ajbeaven

हम $ (selector1) .on (इवेंट, सेलेक्टर 2, फंक्शन) भी कर सकते हैं, जहाँ चयनकर्ता माता-पिता है और चयनकर्ता 2 चयनकर्ता 1 का बच्चा है। यह खोज क्षेत्र को कम करता है क्योंकि आपको पूरे दस्तावेज़ को खोजना होगा।

— रामशरण

@ajbeaven को आपको अपनी पहली टिप्पणी यहाँ एक उत्तर में बदलनी चाहिए (यह वही है जो मैं यहाँ आने पर खोज रहा था)।

— atwright147

Answer 8

मुझे ब्राउज़र बंद घटना की पहचान करने की आवश्यकता है। अनुसंधान करने के बाद मैं jQuery 1.8.3 का उपयोग कर रहा हूं

1. हाइपरलिंक पर क्लिक करने के बाद jQuery का उपयोग करके एक झंडे को चालू करें

   $ ('ए') लाइव ('क्लिक', फ़ंक्शन () {cleanSession = false;});

2. जब किसी भी समय इनपुट बटन के प्रकार पर क्लिक करके jQuery का उपयोग करके एक झंडे को चालू करें

$।

1. किसी भी समय फ़ॉर्म सबमिट होने पर jQuery का उपयोग करके एक ध्वज को चालू करें

$ ('फॉर्म')। जियो ('सबमिट', फंक्शन) () {क्लीनसेशन = गलत;});

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

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

Comments

यह सच नहीं है, आप .onगलत तरीके से उपयोग कर रहे होंगे या आपके कोड में कुछ और हो रहा होगा। शायद अपनी .onविधि के लिए अपना कोड पेस्ट करें ।

— अजबवेन

हाँ। यह सच नहीं है। .on () .live () का उन्नत संस्करण है। इसलिए, अपना कोड यहां पेस्ट करें। ताकि हमारे पास कुछ स्पष्टता हो

— RecklessSergio