क्लिक के बजाय () पर jQuery का उपयोग क्यों करें ()

Question

वर्तमान में jQuery के साथ जब मुझे कुछ करने की आवश्यकता होती है जब एक क्लिक होता है मैं इसे इस तरह से करूँगा ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

मैं कुछ कोड को देख रहा था कि किसी और के पास एक परियोजना है और वे इसे इस तरह से करते हैं ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

ध्यान दें कि यह वही काम करता है जहां तक ​​मैं बता सकता हूं कि वे लाइव () फ़ंक्शन का उपयोग कर रहे हैं जो अब डिप्रेकेटेड है और jQuery डॉक्स on()इसके बजाय उपयोग करने के लिए कहते हैं, लेकिन या तो मेरे पहले उदाहरण के बजाय लाइव / ऑन () का उपयोग क्यों करते हैं?

Comments

कार्यक्षमता इसके अलावा, मैं पसंद onकरने के लिए clickक्योंकि clickएक क्रिया, एक कार्रवाई, जब यह क्या करता है की तरह के रूप में एक समारोह के नाम आवाज़ नहीं तत्व क्लिक करने के लिए (जैसे आप भी एक ही साथ क्या कर सकते clickसमारोह)

— 1j01

Answer 1

क्योंकि आपके पास एक गतिशील रूप से उत्पन्न तत्व (उदाहरण के लिए एक AJAX कॉल से आने वाला) हो सकता है, आप उसी क्लिक हैंडलर को चाहते हो सकते हैं जो पहले उसी तत्व चयनकर्ता के लिए बाध्य था, आप तब on()चयनकर्ता तर्क का उपयोग करके क्लिक इवेंट "डेलिगेट" करते हैं

प्रदर्शित करना:

http://jsfiddle.net/AJRw3/

on()click()यदि आपके पास कोई चयनकर्ता निर्दिष्ट नहीं है, तो उसका भी पर्याय हो सकता है :

$('.elementClass').click(function() { // code 
});

का पर्यायवाची है

$('.elementClass').on('click', function() { // code
});

इस अर्थ में कि यह केवल कक्षा के साथ सभी तत्वों को एक बार हैंडलर जोड़ता है elementClass। यदि आपके पास एक नया elementClassआ रहा है, उदाहरण के लिए $('<div class="elementClass" />'), हैंडलर उस नए तत्व पर बाध्य नहीं होगा, तो आपको करने की आवश्यकता है:

$('#container').on('click', '.elementClass', function() { // code
});

मान लें #containerकि .elementClassपूर्वज है

Answer 2

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

का उपयोग करने के click()लिए एक उपनाम है bind('click' ...)। bind()DOM का उपयोग करते हुए यह तब होता है जब इवेंट श्रोता सेट किया जा रहा है और DOM में प्रत्येक मेलिंग फ़ंक्शन को फ़ंक्शन को बांधता है। यह कहना है कि यदि आप उपयोग $('a').click(...)करते हैं तो आप उस कोड को चलाने पर डोम में पाए गए प्रत्येक एंकर टैग के क्लिक इवेंट को दिए गए फ़ंक्शन को बांध देंगे।

उपयोग करना live()jQuery में पुराना तरीका था; इसका उपयोग ईवेंट्स की तरह bind()ही बाइंड करने के लिए किया गया था , लेकिन यह केवल DOM में तत्वों के लिए बाध्य नहीं होता है जब कोड चलता है - यह DOM में होने वाले परिवर्तनों को भी सुनता है और साथ ही भविष्य के किसी भी मिलान वाले ईवेंट को बाइंड करेगा। यदि आप DOM हेरफेर कर रहे हैं तो यह उपयोगी है और आपको बाद में DOM से हटाए गए / अपडेट / जोड़े गए कुछ तत्वों पर मौजूद होने के लिए एक इवेंट की आवश्यकता है, लेकिन DOM के पहले लोड होने पर मौजूद नहीं है।

कारण यह है कि live()अब मूल्यह्रास हुआ है क्योंकि यह खराब लागू किया गया था है। उपयोग करने के लिए live(), आपको प्रारंभ में DOM में कम से कम एक तत्व का चयन करने में सक्षम होना चाहिए (मुझे विश्वास है)। इससे फ़ंक्शन की एक प्रति भी प्रत्येक तत्व के लिए बाध्य हो सकती है - और यदि आपके पास 1000 तत्व हैं, तो यह बहुत अधिक कॉपी किए गए फ़ंक्शन हैं।

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

... और यह कि मतभेद क्या हैं, और प्रत्येक फ़ंक्शन क्यों मौजूद है और क्यों live()मूल्यह्रास किया जाता है।

Comments

हालांकि यह प्रश्न .click () बनाम .on) के बारे में था। यह (.live) (और .on) के बीच के अंतर का एक उत्कृष्ट वर्णन है, जिसे समझना मुश्किल हो सकता है कि कोई पहली बार किसी .live को बदलने का प्रयास करता है (। ) .on () के साथ और उसे काम करने में समस्याएँ हो रही हैं। यह आधिकारिक डॉक्स की तुलना में बहुत बेहतर व्याख्या देता है। .Live () में खामियों को समझाने के लिए बोनस अंक।

— नाइट उल्लू

Answer 3

• $("a").live()-> यह सभी पर लागू होगा <a>, भले ही इसे कॉल करने के बाद बनाया गया हो।
• $("a").click()-> यह केवल यह <a>कहा जाता है से पहले सभी के लिए लागू होगा । (यह एक शॉर्टकट है bind(), और on()1.7 में)
• $("a").on()-> घटना संचालकों को संलग्न करने के लिए आवश्यक सभी कार्यक्षमता प्रदान करता है। (JQuery 1.7 में नवीनतम)

उद्धरण :

JQuery 1.7 के रूप में, .live () विधि पदावनत है। ईवेंट हैंडलर संलग्न करने के लिए .on () का उपयोग करें। JQuery के पुराने संस्करणों के उपयोगकर्ताओं को .live () के लिए .delegate () का उपयोग करना चाहिए।
यह विधि किसी पृष्ठ के दस्तावेज़ तत्व में प्रत्यायोजित ईवेंट हैंडलर को संलग्न करने का साधन प्रदान करती है, जो किसी पृष्ठ पर सामग्री को गतिशील रूप से जोड़े जाने पर ईवेंट हैंडलर्स के उपयोग को सरल बनाता है। अधिक जानकारी के लिए .on () पद्धति में प्रत्यक्ष बनाम प्रत्यायोजित घटनाओं की चर्चा देखें।

.On () विधि ईवेंट हैंडलर्स को वर्तमान में jQuery ऑब्जेक्ट में तत्वों के चयनित सेट से जोड़ देती है। JQuery 1.7 के रूप में, .on () विधि ईवेंट हैंडलर संलग्न करने के लिए आवश्यक सभी कार्यक्षमता प्रदान करता है।

पूर्व संस्करणों के लिए, .bind () विधि का उपयोग किसी ईवेंट हैंडलर को सीधे तत्वों में संलग्न करने के लिए किया जाता है।

Answer 4

click()के गैर प्रतिनिधि पद्धति के लिए एक शॉर्टकट है on()। इसलिए:

$(".close-box").click() === $(".close-box").on('click')

के साथ घटनाओं को सौंपने के लिए on(), यानी। गतिशील वस्तुओं में आप कर सकते हैं:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

लेकिन, on()किसी भी स्थिर तत्व में प्रतिनिधिमंडल का परिचय, न कि documentजैसा live()करता है, वैसे:

$("#closestStaticElement").on('click', '.close-box')

Comments

इसे "#closestStaticElement" नाम देने के लिए धन्यवाद, मुझे यह नहीं पता था।

— स्कैम

$ (दस्तावेज़) .on ('क्लिक', '.close-box') एकदम सही है!

— माइकल ग्रिग्बी

Answer 5

आप के बीच अंतरlivebind पर पढ़ना चाहिए और ।

संक्षेप में, liveइवेंट डेलिगेशन का उपयोग करता है, जिससे आप उन तत्वों से जुड़ सकते हैं जो अभी और भविष्य में मौजूद हैं।

इसके विपरीत, bind(और इसके शॉर्टकट्स, जैसे click) के माध्यम से संलग्न हैंडलर सीधे चयनकर्ता से मेल खाने वाले DOM तत्वों से जुड़ते हैं , और इसलिए केवल उन तत्वों के लिए बाध्य होते हैं जो अब मौजूद हैं।

liveलचीलेपन का परिणाम प्रदर्शन कम हो जाता है, इसलिए इसका उपयोग तब करें जब आपको इसकी कार्यक्षमता प्रदान करने की आवश्यकता हो।

Answer 6

$el.click(fn) के लिए एक शॉर्टकट है $el.on('click', fn)

अधिक जानकारी के लिए http://api.jquery.com/click/ और http://api.jquery.com/on/ देखें ।

Answer 7

जब आपको कुछ घटना संचालकों को बांधने की आवश्यकता होती है, dynamically added elementsतो आपको इसका उपयोग live(पदावनत) करना होगा या onइसे काम करना होगा। सीधे शब्दों में $('element').click(...);डोम के लिए किसी भी गतिशील रूप से जोड़ा तत्व पर काम नहीं करेगा।

JQuery के .bind (), .live (), और .delegate () के बीच अंतर पर अधिक ।

Answer 8

$ .click () केवल बाइंड या ऑन के लिए एक शॉर्टकट है। JQuery डॉक्स से:

पहले दो विविधताओं में, यह विधि .bind ("क्लिक", हैंडलर) के साथ-साथ jon 1.7 के रूप में .on ("क्लिक", हैंडलर) के लिए एक शॉर्टकट है। तीसरे बदलाव में, जब .click () को तर्कों के बिना कहा जाता है, यह .trigger ("क्लिक") के लिए एक शॉर्टकट है।

Answer 9

.on()विधि jQuery वस्तु में तत्वों की वर्तमान में चयनित सेट करने के लिए ईवेंट हैंडलर्स जुड़ जाता है। click()विधि एक तत्व पर "क्लिक" JavaScript घटना के लिए एक ईवेंट हैंडलर बांधता है, या चलाता है कि घटना।

मैदान में .click(...अगर चयनकर्ता का लक्ष्य मक्खी पर बदलता है (जैसे कुछ अजाक्स प्रतिक्रिया के माध्यम से) तो आपको व्यवहार को फिर से असाइन करना होगा।

.on(...बहुत नया है (jQuery 1.7) और यह प्रत्यायोजित किसी घटना के समय वैसे भी व्यवहार संलग्न करने के लिए एक तेज़ तरीका है का उपयोग करते हुए लाइव परिदृश्य कवर कर सकते हैं।

Answer 10

में onविधि, ईवेंट हैंडलर लक्ष्य के बजाय पेरेंट तत्व से जुड़ा हुआ है।

उदाहरण: $(document).on("click", ".className", function(){});

ऊपर के उदाहरण में, क्लिक करें इवेंट हैंडलर दस्तावेज़ से जुड़ा हुआ है। और यह जानने के लिए ईवेंट बुदबुदाहट का उपयोग करता है कि किसी ने लक्ष्य तत्व पर क्लिक किया है या नहीं।