.On ('क्लिक') बनाम .click () के बीच अंतर
जवाबों:
मुझे लगता है, अंतर उपयोग पैटर्न में है।
मैं .onअधिक पसंद करूंगा .clickक्योंकि पूर्व कम स्मृति का उपयोग कर सकता है और गतिशील रूप से जोड़े गए तत्वों के लिए काम कर सकता है ।
निम्नलिखित HTML पर विचार करें:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>
जहां हम नए बटन जोड़ते हैं
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});
और "चेतावनी" चाहते हैं एक चेतावनी दिखाने के लिए। हम उसके लिए "पर क्लिक करें" या "चालू" का उपयोग कर सकते हैं।
जब हम उपयोग करते हैं click
$("button.alert").click(function() {
alert(1);
});उपरोक्त के साथ, चयनकर्ता से मेल खाने वाले हर एक तत्व के लिए एक अलग हैंडलर बनाया जाता है । इसका मत
- कई मिलान तत्व कई समान हैंडलर बनाते हैं और इस प्रकार मेमोरी फ़ुटप्रिंट को बढ़ाते हैं
- गतिशील रूप से जोड़े गए आइटम में हैंडलर नहीं होगा - यानी, उपरोक्त HTML में नव जोड़ा "अलर्ट!" बटन तब तक काम नहीं करेंगे जब तक आप हैंडलर को रिबंड नहीं करते।
जब हम उपयोग करते हैं .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});उपरोक्त के साथ, सभी तत्वों के लिए एक एकल हैंडलर जो आपके चयनकर्ता से मेल खाता है, जिसमें गतिशील रूप से बनाए गए शामिल हैं।
... उपयोग करने का एक और कारण .on
जैसा कि एड्रियन ने नीचे टिप्पणी की थी, उपयोग करने का एक और कारण .onनामांकित घटनाएं हैं।
यदि आप अपने साथ एक हैंडलर जोड़ते हैं, तो आप .on("click", handler)इसे सामान्य रूप से हटा सकते हैं, .off("click", handler)जो उस हैंडलर को हटा देगा। स्पष्ट रूप से यह केवल तभी काम करता है जब आपके पास फ़ंक्शन का संदर्भ हो, तो क्या होगा यदि आप नहीं करते हैं? आप नामस्थान का उपयोग करते हैं:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });के माध्यम से unbinding के साथ
$("#element").off("click.someNamespace");on('click' ...), देखें stackoverflow.com/a/3973060/759452 यानी। on('click.darkenallothersections' ...)और एक ही समय में है on('click.displaynextstep' ...), तो मैं केवल एक ही मैं का उपयोग कर सकते हैं unbind कर सकते हैं.unbind('click.displaynextstep')
on()jQuery में प्रवृत्ति है। जब मैंने jQuery 3 में अपग्रेड किया तो मुझे अपडेट $(window).load(function() {});करना पड़ा $(window).on("load", function (e) {})।
निम्नलिखित कोड के बीच कोई अंतर है?
नहीं, आपके प्रश्न में दो कोड नमूनों के बीच कोई कार्यात्मक अंतर नहीं है। .click(fn)के लिए एक "शॉर्टकट विधि" है .on("click", fn)। के लिए प्रलेखन से.on() :
कुछ घटनाओं के लिए आशुलिपि के तरीके हैं जैसे
.click()कि घटना संचालकों को संलग्न करने या ट्रिगर करने के लिए उपयोग किया जा सकता है। शॉर्टहैंड विधियों की एक पूरी सूची के लिए, घटनाओं की श्रेणी देखें ।
ध्यान दें कि .on()इसमें भिन्नता .click()है कि इसमें एक पैरामीटर पास करके प्रतिनिधि इवेंट हैंडलर बनाने की क्षमता है selector, जबकि .click()ऐसा नहीं है। जब इसे .on()एक selectorपैरामीटर के बिना कहा जाता है , तो यह बिल्कुल वैसा ही व्यवहार करता है .click()। यदि आप इवेंट डेलिगेशन चाहते हैं, तो उपयोग करें .on()।
selector। यदि आप .on()एक selectorपैरामीटर के बिना कॉल करते हैं तो उपयोग करने पर कोई प्रदर्शन सुधार नहीं होता है .click()।
.on()jQuery 1.7 के रूप में अपने सभी ईवेंट बाइंडिंग करने के लिए अनुशंसित तरीका है। यह दोनों के सभी कार्यक्षमता को रोल करता है .bind()और .live()एक फ़ंक्शन में यह व्यवहार को बदल देता है क्योंकि आप इसे विभिन्न मापदंडों से गुजरते हैं।
जैसा कि आपने अपना उदाहरण लिखा है, दोनों में कोई अंतर नहीं है। दोनों ने एक हैंडलर को इस clickघटना के लिए बाध्य किया #whatever। यदि आप चुनते हैं, तो आपको एकल हैंडलर फ़ंक्शन के on()बच्चों द्वारा निकाल दी गई घटनाओं को सौंपने की अनुमति देने में अतिरिक्त लचीलापन प्रदान करता है #whatever।
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()करता है? इसके अलावा, यह अन्य उत्तरों के साथ विरोधाभास लगता है जो कहते हैं कि इसमें केवल कार्यक्षमता है .click(), और इसलिए यह भविष्य की घटनाओं पर लागू नहीं होता है।
.on()क्या कर सकते हैं .click()करता है और क्या करना है .bind()और .live()क्या करना - यह क्या आप से कॉल करने की पैरामीटर निर्भर करता है। "#Whatever अंदर सभी लिंक से आबद्ध करें" (कुछ अन्य उत्तर यह भी उल्लेख किया है।) नोट हालांकि वह यह है कि नहीं क्या .live()होता है, यह क्या हो रहा है .delegate()है। कंटेनर को निर्दिष्ट करने के बजाय .live()सभी को अंदर documentसे बांधता है । नोट भी .live()jQuery 1.7 के बाद से हटा दिया गया है।
जैसा कि अन्य उत्तरों द्वारा उल्लेख किया गया है:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })हालांकि ऐसा नहीं है .on()कि कई अन्य पैरामीटर संयोजनों का समर्थन .click()करता है, जो इसे इवेंट डेलिगेशन (सुपर्रेडिंग .delegate()और .live()) को संभालने की अनुमति नहीं देता है ।
(और स्पष्ट रूप से "कीप", "फ़ोकस", आदि के लिए अन्य समान शॉर्टकट तरीके हैं)
कोई अतिरिक्त उत्तर पोस्ट करने का कारण यह है कि यदि आप .click()बिना किसी पैरामीटर के कॉल करते हैं तो क्या होगा :
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");यह देखते हुए कि यदि आप .trigger()सीधे उपयोग करते हैं तो आप अतिरिक्त पैरामीटर या एक jQuery ईवेंट ऑब्जेक्ट भी पास कर सकते हैं, जिसे आप नहीं कर सकते .click()।
मैं यह भी उल्लेख करना चाहता था कि यदि आप jQuery स्रोत कोड (jquery-1.7.1.js में देखें) तो आप देखेंगे कि आंतरिक रूप से .click()(या .keyup(), आदि) फ़ंक्शन वास्तव में कॉल करेंगे .on()या .trigger()। जाहिर है इसका मतलब है कि आप आश्वस्त हो सकते हैं कि उनके पास वास्तव में एक ही परिणाम है, लेकिन इसका मतलब यह भी है कि उपयोग .click()करने से थोड़ा अधिक ओवरहेड होता है - ज्यादातर परिस्थितियों में चिंता करने या यहां तक कि कुछ भी सोचने के लिए नहीं, लेकिन सैद्धांतिक रूप से यह असाधारण परिस्थितियों में भी हो सकता है।
संपादित करें: अंत में, ध्यान दें कि .on()आप एक ही पंक्ति में कई घटनाओं को एक पंक्ति में बाँध सकते हैं, जैसे:
$("#whatever").on("click keypress focus", function(){});.click()
वे एक ही प्रतीत होते हैं ... क्लिक () फ़ंक्शन से प्रलेखन :
यह विधि .bind ('क्लिक', हैंडलर) के लिए एक शॉर्टकट है
पर () समारोह से प्रलेखन :
JQuery 1.7 के रूप में, .on () विधि ईवेंट हैंडलर संलग्न करने के लिए आवश्यक सभी कार्यक्षमता प्रदान करता है। पुराने jQuery इवेंट विधियों से परिवर्तित करने में सहायता के लिए, .bind (), .delegate (), और .live () देखें। .On () से जुड़ी घटनाओं को हटाने के लिए, .off () देखें।
.clickबनाम से बेहतर है.on
.click ईवेंट केवल तभी काम करते हैं जब तत्व प्रदान किया जाता है और केवल डोम तैयार होने पर लोड किए गए तत्वों से जुड़ा होता है।
.on घटनाएँ गतिशील रूप से DOM तत्वों से जुड़ी होती हैं, जो तब सहायक होती है जब आप किसी ईवेंट को DOM तत्वों में संलग्न करना चाहते हैं जो ajax अनुरोध पर या कुछ और (DOM तैयार होने के बाद) पर प्रदान किया जाता है।
यहां आपको क्लिक इवेंट को लागू करने के विभिन्न तरीकों की सूची मिलेगी। आप अपने हिसाब से चयन योग्य हो सकते हैं या यदि आपका क्लिक काम नहीं कर रहा है तो इनमें से वैकल्पिक विकल्प का प्रयास करें।
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})जब तक इंटरनेट से ilearned और कुछ दोस्तों .on () का उपयोग तब किया जाता है जब आप तत्वों को गतिशील रूप से जोड़ते हैं। लेकिन जब मैंने इसे एक साधारण लॉगिन पेज में इस्तेमाल किया, जहां क्लिक इवेंट को AJAX को नोड को भेजना चाहिए। और बदले में नए तत्वों को जोड़ने के लिए मल्टी-AJAX कॉल करना शुरू कर दिया। जब मैंने इसे क्लिक करने के लिए बदल दिया () सब कुछ सही हो गया। वास्तव में मुझे पहले इस समस्या का सामना नहीं करना पड़ा।
नए तत्व
यदि आप नए तत्वों को संलग्न करने के लिए क्लिक करना चाहते हैं, तो महत्वपूर्ण बिंदुओं को उजागर करने के लिए ऊपर दिए गए व्यापक उत्तरों के परिशिष्ट के रूप में:
- पहले चयनकर्ता द्वारा चुने गए तत्व जैसे $ ("बॉडी") उस समय मौजूद होना चाहिए, जब घोषणा की जाती है अन्यथा संलग्न करने के लिए कुछ भी नहीं है।
- आपको दूसरे तर्क के रूप में अपने लक्ष्य तत्वों के लिए वैध चयनकर्ता सहित .on () फ़ंक्शन में तीन तर्कों का उपयोग करना चाहिए।
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- यह अधिक प्रभावी है तब $ ('। UPDATE') क्लिक करें (फ़ंक्शन () {});
- यह कम स्मृति का उपयोग कर सकता है और गतिशील रूप से जोड़े गए तत्वों के लिए काम कर सकता है।
- कुछ समय डायनामिक रूप से संपादित और डिलीट बटन के साथ डेटा, फॉर्म में पंक्ति डेटा के EDIT या DELETE डेटा के समय JQuery की घटना उत्पन्न नहीं करता है, उस समय
$(document).on('click','.UPDATE',function(){ });को प्रभावी ढंग से jquery का उपयोग करके समान डेटा प्राप्त किया जाता है। बटन अपडेट या हटाने के समय काम नहीं कर रहा है:
