मैं jQuery में हैंडलर घटना के लिए तर्क कैसे पारित कर सकता हूं?

Question

जैसे jQuery कोड के साथ:

$("#myid").click(myfunction);

function myfunction(arg1, arg2) {/* something */}

myfunctionJQuery का उपयोग करते समय मैं तर्क कैसे पास करूं ?

Comments

पैरामीटर के साथ एक फ़ंक्शन को पैरामीटर के रूप

— मिशैल पेरोलाकोव्स्की

Answer 1

इसका सबसे सरल तरीका यह है कि आप ऐसा करें (यह मानकर कि आप किसी भी घटना की जानकारी फंक्शन में नहीं चाहते हैं) ...

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFiddle ।

यह एक अनाम फ़ंक्शन बनाता है, जिसे clickइवेंट ट्रिगर होने पर कहा जाता है। यह बदले में myfunction()आपके द्वारा प्रदान किए गए तर्कों के साथ कॉल करेगा।

यदि आप रखना चाहते हैं ThisBinding( thisजब फ़ंक्शन को लागू किया जाता है, तो उस मूल्य को उस तत्व पर सेट करें जो घटना को ट्रिगर करता है), तो फ़ंक्शन को कॉल करें call()।

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFiddle ।

आप संदर्भ को सीधे उस तरह से पारित नहीं कर सकते जिस तरह से आपका उदाहरण बताता है, या इसका एकल तर्क jQuery eventऑब्जेक्ट होगा ।

यदि आप संदर्भ पास करना चाहते हैं, तो आपको jQuery के proxy()फ़ंक्शन (जो एक क्रॉस ब्राउज़र आवरण के लिए है Function.prototype.bind()) का लाभ उठाना चाहिए । यह आपको तर्क है, जो बाध्य कर रहे हैं पारित करने देता से पहलेevent तर्क।

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

jsFiddle ।

इस उदाहरण में, myfunction()इसके ThisBindingअक्षुण्ण के साथ निष्पादित किया जाएगा ( nullकोई वस्तु नहीं है, इसलिए thisघटना के ट्रिगर होने वाले तत्व का सामान्य मूल्य), तर्कों के साथ (क्रम में) arg1, arg2और अंत में jQuery eventऑब्जेक्ट, जिसे आप अनदेखा कर सकते हैं। यदि यह आवश्यक नहीं है (फ़ंक्शन के तर्कों में भी इसका नाम नहीं है)।

तुम भी jQuery का उपयोग इस्तेमाल कर सकते हैं eventवस्तु के dataडेटा पास करने के, लेकिन इस संशोधित करने की आवश्यकता होगी myfunction()के माध्यम से इसे उपयोग करने के लिए event.data.arg1(जो नहीं हैं प्रकार्य तर्क अपने प्रश्न का उल्लेख है की तरह), या कम से कम पूर्व उदाहरण या उत्पन्न एक की तरह एक मैन्युअल प्रॉक्सी क्रिया पेश बाद के उदाहरण का उपयोग करना।

Comments

ध्यान रखें, आप myfunction () में jquery के संदर्भ $ (यह) खो देंगे। बनाए रखने के लिए, myfunction(this, arg1, arg2)अनाम हैंडलर से कॉल करें । तब आपका कार्य कर सकते हैंmyfunction(el, arg1, arg2) { alert($(el).val()); }

— लैम्बिनेटर

@geosteve: यदि आप इसे रखना चाहते हैं, तो उपयोग करें myfunction.call(this, arg1, arg2)।

— एलेक्स

यह फ़ंक्शन के तर्क नहीं दे रहा है, जैसा कि सवाल पूछता है। यह एक फ़ंक्शन को कॉल कर रहा है जो दूसरे फ़ंक्शन को कॉल करता है। अनाम फ़ंक्शंस के अंदर फ़ंसे हुए कार्य एक अच्छा विचार नहीं है क्योंकि आप अनाम फ़ंक्शन को आसानी से खोल नहीं सकते हैं।

— जॉर्ज फिलिप्पोस

@ geo1701 यदि आप एक कस्टम नेमस्पेस का उपयोग करते हैं और केवल एक बार इसे बाँध सकते हैं। अधिकांश उद्देश्यों के लिए, यह ठीक है। लेकिन आप उस लाभ को खो देते हैं जिसका आपने उल्लेख किया था।

— एलेक्स

@ Geo1701 के साथ सहमत, मुझे इवेंट हैंडलर को हटाना पड़ा और उसका समाधान केवल एक ही है जिसने काम किया।

— पावेल K

Answer 2

$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction);

function myfunction(e) {

    var arg1 = e.data.arg1;
    var arg2 = e.data.arg2;

    alert(arg1);
    alert(arg2);

}

//call method directly:
myfunction({
    arg1: 'hello agian', 
    arg2: 'bye again'
});

इसके अलावा, आप ऑन और ऑफ विधियों का उपयोग करके विशिष्ट ईवेंट हैंडलर्स को बांधने और उन्मुक्त करने की अनुमति देते हैं।

उदाहरण:

$("#myid").off('click', myfunction);

यह #myid से myfunction हैंडलर को खोल देगा

Comments

यह फ़ंक्शन के तर्क नहीं दे रहा है, जैसा कि सवाल पूछता है।

— एलेक्स

यह है कि आप तर्क कैसे पास करते हैं (आप उन्हें एक वस्तु के अंदर लपेटते हैं)।

— जॉर्ज फिलिप्पोस

यह है कि आप डेटा कैसे पास करते हैं, लेकिन यह एक फ़ंक्शन कॉल करता है जो उन्हें फ़ंक्शन तर्क देता है।

— एलेक्स

यह स्वीकृत उत्तर के लिए एक बेहतर समाधान है क्योंकि यह ऑन / ऑफ विधियों का उपयोग करके श्रोताओं को बांधने और सुनने की अनुशंसित पद्धति का उपयोग करता है।

— जॉर्ज फिलिप्पोस

यदि आपको लगता है कि unbinding काफी दुर्लभ है, तो आपके पास बहुत सीमित अनुभव होना चाहिए। कृपया दूसरों से पू पू योगदान न करें - यह एक सामूहिक ज्ञान का आधार है प्रतियोगिता नहीं। कोई भी सवाल सही या गलत नहीं है।

— जॉर्ज फिलिप्पोस

Answer 3

जब आपको निश्चित रूप से एलेक्स के उत्तर का उपयोग करना चाहिए, तो प्रोटोटाइप लाइब्रेरी की "बाइंड" पद्धति को एक्मास्क्रिप्ट 5 में मानकीकृत किया गया है, और जल्द ही इसे मूल रूप से ब्राउज़रों में लागू किया जाएगा। यह इस तरह काम करता है:

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));

Comments

विल thisयदि आप उदाहरण के लिए इस विधि का उपयोग, एक अलग संदर्भ के लिए सेट हो bind()के लिए यह ing thisउस संदर्भ में (वैश्विक) कि क्लिक होने हैंडलर में हो सकता है windowके रूप में वस्तु thisके रूप में के लिए एक संदर्भ के लिए विरोध #myidतत्व?

— एलेक्स

@alex आप काफी सही हैं। jQuery अपने घटना संचालकों में # 'तत्व' को 'बाइंड' करेगा, और बाइंड पद्धति का उपयोग करने से वह ओवरराइड हो जाएगा। मैंने इस पोस्ट को कई साल पहले लिखा था इसलिए ऐसा लगता है कि यह कहना मुश्किल है कि मैं उस समय क्या सोच रहा था। मुझे लगता है कि मैं केवल यह मानता हूं कि मेरे उत्तर पढ़ने वाले लोग इन विवरणों को स्वयं समझने के लिए पर्याप्त स्मार्ट हैं।

— ब्रेटन

यह एक बहुत ही खतरनाक धारणा है।

— ट्रैविस

@Travis इस लेखन के अनुसार, (ब्रेटन के उत्तर के लगभग 11 साल बाद), caniuse.com की रिपोर्ट एक्मास्क्रिप्ट 5 को 98.87% ब्राउज़रों का समर्थन प्राप्त है । (देखें caniuse.com/#search=ECMAScript%205 )

— स्टीफ़न

@Stephan मेरी जीभ-में-गाल टिप्पणी का उद्देश्य @Breton को संभालने के लिए था, एक्मास्क्रिप्ट के people reading my answers are smart enough to figure these details out themselvesबारे में नहीं।

— ट्रैविस

Answer 4

पुराना धागा, लेकिन खोज उद्देश्यों के लिए; प्रयत्न:

$(selector).on('mouseover',...);

... और "डेटा" पैरामीटर देखें : http://api.jquery.com/on/

उदाहरण के लिए:

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );

Answer 5

पहले से ही शानदार जवाब हैं, लेकिन वैसे भी, यहां मेरे दो सेंट हैं। आप भी उपयोग कर सकते हैं:

$("#myid").click({arg1: "foo", arg2: "bar"}, myfunction)

और श्रोता ऐसे दिखेंगे:

function myfunction(event){ alert(event.data.arg1); alert(event.data.arg2); }

Answer 6

सरल:

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}