jQuery का -क्लिक करें - उपयोगकर्ता फ़ंक्शन के लिए पैरामीटर पास करें

Question

मैं jQuery के .click का उपयोग करते हुए मापदंडों के साथ एक फ़ंक्शन को कॉल करने की कोशिश कर रहा हूं, लेकिन मुझे यह काम करने के लिए नहीं मिल सकता है।

यह है कि मैं इसे कैसे काम करना चाहता हूं:

$('.leadtoscore').click(add_event('shot'));

जो कॉल करता है

function add_event(event) {
    blah blah blah }

यह काम करता है अगर मैं इस तरह के मापदंडों का उपयोग नहीं करता हूं:

$('.leadtoscore').click(add_event);
function add_event() {
    blah blah blah }

लेकिन मुझे अपने माध्यम से एक पैरामीटर पास करने में सक्षम होना चाहिए add_event फ़ंक्शन के ।

मैं यह विशिष्ट काम कैसे कर सकता हूं?

मुझे पता है कि मैं उपयोग कर सकता हूं .click(function() { blah }, लेकिन मैं add_eventकई स्थानों से फ़ंक्शन को कॉल करता हूं और इस तरह से करना चाहता हूं।

Comments

यह patricksउत्तर से अपनाया गया है, जो मुझे लगता है कि एक महान समाधान है: jsfiddle.net/naRRk/1

— jAndy

Answer 1

संपूर्णता के लिए, मैं एक अन्य समाधान में आया था जो jQuery क्लिक इवेंट हैंडलर के संस्करण 1.4.3 में पेश की गई कार्यक्षमता का हिस्सा था ।

यह आपको इवेंट ऑब्जेक्ट के लिए एक डेटा मैप पास करने की अनुमति देता है जो स्वचालित रूप से पहले पैरामीटर के रूप में jQuery द्वारा इवेंट हैंडलर फ़ंक्शन को वापस खिलाया जाता है। डेटा मैप को .click()पहले पैरामीटर के रूप में फ़ंक्शन को सौंपा जाएगा , उसके बाद ईवेंट हैंडलर फ़ंक्शन।

यहाँ कुछ कोड का वर्णन है कि मेरा क्या मतलब है:

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

मुझे पता है कि इस प्रश्न के लिए खेल में देर हो चुकी है, लेकिन पिछले उत्तरों ने मुझे इस समाधान की ओर अग्रसर किया है, इसलिए मुझे आशा है कि यह किसी समय किसी की मदद करता है!

Comments

यह वही है जो मैं चाहता था (फिर वापस)। मैंने तब से इस परियोजना पर काम नहीं किया है, लेकिन मुझे लगता है कि मैं 1.4.0 का उपयोग कर रहा था। यह निश्चित रूप से उपलब्ध सबसे अच्छा तरीका है।

— पॉल हॉफ़र

मैं गतिशील रूप से सर्वर साइड पर ऑब्जेक्ट बना रहा हूं और क्लिक इवेंट को बाइंड कर रहा हूं: r.OnClientClick = "imageClicked ({param1: '" + obj.Command + "'}); झूठी वापसी; फिर क्लाइंट के पास मेरे पास: function imageClicked (इवेंट) {if (event.param1 == "GOTO PREVIOUS") {... यदि मैं Event.data.param1 का उपयोग करता हूं तो यह कहता है कि यह अपरिभाषित है। अब मैंने इसे यहाँ टाइप किया है, मैं अंतर देख सकता हूँ, डीओएच!

— परिवार

@ फ़ैमिली - हाहा नो प्रॉब्लम, कमेंट्स के ज़रिए मदद करना अच्छा लगता है;)

— क्रिस केम्पेन

@totymedli - मुझे लगता है कि आप इसे हमेशा कहीं और कॉल कर सकते हैं, एक ही संरचना का एक ऑब्जेक्ट पास करना var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);:?

— क्रिस केम्पेन

यह HTML5 डेटा- विशेषताओं का उपयोग करने से बहुत बेहतर है, धन्यवाद! (और जेएसहिंट ने कॉलबैक में भी 'इस' का इस्तेमाल करने की शिकायत की!)

— मैथ्यू हर्बस्ट

Answer 2

आपको इस तरह एक अनाम फ़ंक्शन का उपयोग करने की आवश्यकता है:

$('.leadtoscore').click(function() {
  add_event('shot')
});

आप इसे उदाहरण के रूप में कह सकते हैं , जैसे पैरामीटर के बिना एक फ़ंक्शन नाम , इस तरह:

$('.leadtoscore').click(add_event);

लेकिन यह add_eventविधि 'shot'पैरामीटर के रूप में नहीं मिलेगी , बल्कि जो कुछ भी clickहै वह कॉलबैक को पास करता है, जो कि eventस्वयं वस्तु है ... इसलिए यह इस मामले में लागू नहीं है , लेकिन कई अन्य लोगों के लिए काम करता है। यदि आपको मापदंडों को पारित करने की आवश्यकता है, तो एक अनाम फ़ंक्शन का उपयोग करें ... या, एक अन्य विकल्प है, .bind()डेटा का उपयोग करें और पास करें, जैसे:

$('.leadtoscore').bind('click', { param: 'shot' }, add_event);

और इसे add_eventइस तरह एक्सेस करें:

function add_event(event) {
  //event.data.param == "shot", use as needed
}

Comments

जब आप सिर्फ कहते हैं, तो क्या इसका मतलब केवल यह है? दूसरे, इसका मतलब है कि मैं अपने add_event फ़ंक्शन के अंदर $ (इस) का उपयोग करने में सक्षम होगा जैसे कि मैं सामान्य रूप से अनाम फ़ंक्शन के अंदर होगा?

— पॉल हॉफ़र

@phoffer - हाँ, "बस" का अर्थ है कोई परम, केवल फ़ंक्शन नाम, यह फ़ंक्शन का संदर्भ है, फ़ंक्शन को चलाने का परिणाम नहीं जिसे आप clickहैंडलर को असाइन करना चाहते हैं । अनाम विधि और .bind()ऊपर दिए गए उदाहरणों में this, आप इसका उपयोग कर सकते हैं , यह .loadtoscoreआपके द्वारा क्लिक किए गए (जैसे आप अपेक्षा करेंगे) का उल्लेख करेंगे । अंतिम उदाहरण में, add_event(event)यह सच है, का उपयोग करें thisया $(this)यह वही होगा जो आप चाहते हैं।

— निक Craver

@ संदर्भ: आपको इसका उपयोग करने के लिए तत्व को स्पष्ट रूप से पास करना होगा, जैसे: function(){ add_event('shot', $(this));}और function add_event(event, element){...}। elementयहां एक jQuery तत्व होगा (यह bind()निक के रूप में यद्यपि के साथ काम करता है )।

— फेलिक्स क्लिंग

- @Felix उन्होंने यह भी उपयोग कर सकते हैं $(this): समारोह के अंदर, उदाहरण के लिए jsfiddle.net/tSu5t

— निक Craver

Answer 3

यदि आप इसे जिस तरह से आप इसे कहते थे ...

$('.leadtoscore').click(add_event('shot'));

... आपको add_event()एक फ़ंक्शन वापस करने की आवश्यकता होगी , जैसे ...

function add_event(param) {
    return function() {
                // your code that does something with param
                alert( param );
           };
}

फ़ंक्शन लौटाया जाता है और इसके लिए तर्क के रूप में उपयोग किया जाता है .click()।

Comments

@jAndy - eventपैरामीटर सहित उदाहरण पोस्ट करने के लिए धन्यवाद । मुझे इसे शामिल करना चाहिए था। : ओ)

— user113716

Answer 4

मुझे .on () का उपयोग करके सफलता मिली:

$('.leadtoscore').on('click', {event_type: 'shot'}, add_event);

फिर add_eventफ़ंक्शन के अंदर आपको इस तरह से 'शॉट' तक पहुंच मिलती है:

event.data.event_type

अधिक जानकारी के लिए .on () प्रलेखन देखें , जहां वे निम्नलिखित उदाहरण प्रदान करते हैं:

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

Answer 5

हाँ, यह एक पुरानी पोस्ट है। बावजूद, कोई इसे उपयोगी पा सकता है। यहां ईवेंट हैंडलर को पैरामीटर भेजने का एक और तरीका है।

//click handler
function add_event(event, paramA, paramB)
{
    //do something with your parameters
    alert(paramA ? 'paramA:' + paramA : '' + paramB ? '  paramB:' + paramB : '');
}

//bind handler to click event
$('.leadtoscore').click(add_event);
...
//once you've processed some data and know your parameters, trigger a click event.
//In this case, we will send 'myfirst' and 'mysecond' as parameters
$('.leadtoscore').trigger('click', {'myfirst', 'mysecond'});

//or use variables
var a = 'first',
    b = 'second';

$('.leadtoscore').trigger('click', {a, b});
$('.leadtoscore').trigger('click', {a});

Answer 6

      $imgReload.data('self', $self);
            $imgReload.click(function (e) {
                var $p = $(this).data('self');
                $p._reloadTable();
            });

JavaScript ऑब्जेक्ट को ऑनक्लिक तत्व पर सेट करें:

 $imgReload.data('self', $self);

"इस" तत्व से वस्तु प्राप्त करें:

 var $p = $(this).data('self');

Comments

बहुत बढ़िया! अफसोस की बात है, यह केवल एक चीज है जो तब काम करती है जब मैं jquery चर का उपयोग करने की कोशिश करता हूं! पता नहीं क्यों। : |

— cregox

Answer 7

मैं सरल समाधान प्राप्त करता हूं:

 <button id="btn1" onclick="sendData(20)">ClickMe</button>

<script>
   var id; // global variable
   function sendData(valueId){
     id = valueId;
   }
   $("#btn1").click(function(){
        alert(id);
     });
</script>

मेरा मतलब यह है कि मान onclickघटना को पास करें javascript function sendData(), चर को इनिशियलाइज़ करें और इसे jquery इवेंट हैंडलर विधि द्वारा लें।

यह संभव है क्योंकि पहली बार में sendData(valueid)कहा जाता है और मूल्य को इनिशियलाइज़ करता है। फिर jquery घटना के बाद निष्पादित हो और उस मूल्य का उपयोग करें।

यह सीधे आगे का समाधान है और विस्तार समाधान के लिए यहां जाएं ।

Comments

मुझे यहां डायनामिक मापदंडों को पारित करने का कोई रास्ता नहीं दिखता है, केवल हार्ड-कोडेड मान हैं।

— user1451111

इस तरह आप केवल valueId पास करते हैं और तत्व और ईवेंट ऑब्जेक्ट खो देते हैं।

— ज़ोल्टन सुले