How do I pass arguments to an event handler?

Question

I have a function object to which I want to pass an argument on click using jquery, but it's not working.

<script>
var item=232;
$(function(){
    $('div').click(fn_clik('Mike'))
})

var fn_clik = function(name){
        alert('Name is:' + name + ' item is:' + item)
}
</script>

I don't understand the concept behind it. Can anyone please explain where am I going wrong?

https://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 — epoch, Jul 16 '14 at 14:15
First things first. This sample is "wrong" because with `fn_clik('Mike')` you are invoking `fn_clik` on the spot, while what you really want is to arrange for it to be called later. This is crucial in order to understand the possible solutions. — Jon, Jul 16 '14 at 14:19

kbirk · Accepted Answer · 2014-07-16T14:33:58.327

4

Have the function you are calling return a function with the name, passed by argument, in a closure:

$('div').click( fn_clik('Mike') );

var fn_clik = function(name){      
     return function() {
         alert('Name is:' + name + ' item is:' + item);
     }
}

Or have an anonymous function you pass wrap the original function called with the correct parameter:

$('div').click(function () {
    fn_clik('Mike')
});

A quick note, in your original code, you were calling the function 'fn_clik' instead of passing it as an object. So your code was evaluating to:

$('div').click( undefined );

This is because your original 'fn_clik' has no return value;

edited Jul 16 '14 at 14:33

answered Jul 16 '14 at 14:17

kbirk

3,906
7
48
72

`fn_clik()` will be invoked immediately, not when the click is triggered. – George Jul 16 '14 at 14:20
@oGeez And that's fine, because `fn_clik` **returns a function** – Ian Jul 16 '14 at 14:22
@Ian right you are, I should've been paying more attention. – George Jul 16 '14 at 14:23
Won't it create a new function each click? – sp00m Jul 16 '14 at 14:25
3

@sp00m No because the .click() function that registers the event handler is only called once. – kbirk Jul 16 '14 at 14:26
While this answer is correct, I think it's horribly confusing for the OPs current level of understanding. – Adam Jenkins Jul 16 '14 at 14:27

user2226755 · Answer 2 · 2014-07-16T14:33:50.323

If you write "func(...)" you call your function, you must to juste write function name.

Without argument

Like this :

$('div').click(fn_clik);

With argument

If you want get argument, use anonymous function like this :

$('div').click(function () {
    fn_clik('Mike')
});

See this and event variables.

The this variable return element node, and event return click event.

$("body").click(function (event) {
    if (this == $("body")[0]) {
        alert("self");
    }
});

Demo

Fisher Man · Answer 3 · 2014-07-16T14:25:10.783

1

This is hownormally I do ,

<script>
    var item=232;
    $(function(){
        $('div').on('click',function(){
            fn_clik('Mike');
        });

    })

    function fn_clik(name){
            alert('Name is:' + name + ' item is:' + item)
    }
</script>

Thanks.

edited Jul 16 '14 at 14:25

answered Jul 16 '14 at 14:19

Fisher Man

487
1
5
14

Guffa · Answer 4 · 2014-07-16T14:30:26.007

You are calling the function and using the return value (undefined) when binding, instead of getting a reference to the function that the event can call.

Wrap the function call in a function expression, so that you get a reference to it:

$('div').click(function() { fn_clik('Mike'); });

You can also use the proxy method to create a function with the parameter bound to it:

$('div').click($.proxy(fn_clik, this, 'Mike'));

score 0 · Answer 5 · answered Jul 16 '14 at 14:21

0

var item = 232;

$(function(){   
    $('div').click(function(e){fn_click("Mike");});
})

var fn_clik = function(name){      
    alert('Name is:' + name + ' item is:' + item)
}

answered Jul 16 '14 at 14:21

afaolek

8,452
13
45
60

How do I pass arguments to an event handler?

5 Answers5

Without argument

With argument

See this and event variables.

Linked