How to pass Event as a parameter in JQuery function

Question

Hi I am learning JQuery and I have written a small function where I am attaching a function with a button's click event.

this is the head element of the HTML

<script type="text/javascript">
 $(pageLoaded); 
 function pageLoaded() 
 {
 $("#Button1").bind("click", 
 { key1: "value1", key2: "value2" }, 
 function buttonClick(event) 
 {
 $("#displayArea").text(event.data.key1);
 }
 );
 } 
</script>

This is the body of the HTML

<input id="Button1" type="button" value="button" />
<div id = "displayArea" style="border:2px solid black; width:300px; height:200px">

This code works fine. But when I try to write the buttonClick function outside the anonymus method, it does not work anymore.

I tried to call it this way:

$("#Button1").bind("click", 
 { key1: "value1", key2: "value2" }, 
 buttonClick(event));
function buttonClick(var event) 
{
 $("#displayArea").text(event.data.key1);
}

This is not working. Am I doing some mistake while passing the Event as parameter? what is the correct way to do it without using anonymous methods?

Answer 1

You need to pass a function reference as the click handler, but what you are doing here

$("#Button1").bind("click", 
 { key1: "value1", key2: "value2" }, 
 buttonClick(event));

is calling buttonClick(event) immediately and which return undefined and sets that as the click handler. You have to pass a function reference like buttonClick and you will get event param automatically (jQuery will send that when calling the handler).

Full Code:

$(function(){
 $("#Button1").bind("click", 
 { key1: "value1", key2: "value2" }, 
 buttonClick);
 function buttonClick(event) 
 {
 $("#displayArea").text(event.data.key1);
 } ​
});

Demo: http://jsfiddle.net/joycse06/cjc9r/

---

Update (Based On @Tadeck's comment):

Your code will work fine if you use function expression like this

var buttonClick = function(event){
 $("#displayArea").text(event.data.key1);
};

And you have to place this above its first use. In this case before

$("#Button1").bind("click", ...

Because function expressions are not hoisted at the top of current scope like function declaration. So you can use them only after the expression has been interpreted by JS interpreter.

• Anthony Grist: +1 for being the first person to actually explain what they were doing wrong, rather than just posting code.
• Tadeck: +1. It is worth mentioning, that if you define function the way it happens in this answer, everything will work. But if you define function like that: var buttonClick = function(event){ ... }, the definition would need to be placed before the "function reference" is being used (in this case: before $("#Button1").bind(...) is invoked).
• Prasenjit Kumar Nag: @Tadeck, Thanks Sir, may I add that to my answer?
• Manas Saha: Thank you Joy, It works fine. earlier I was thinking that since I was calling the function, I need to match the function signature from my calling code.
• Prasenjit Kumar Nag: @Tadeck, Sir, updated answer, check and feel free to edit, if you find anything wrong.

Answer 2

There are two mistakes in your solution you will have to change

var is only used to define a variable not a parameter of a function

function buttonClick(event)
{
 $("#displayArea").text(event.data.key1);
}

The other thing is the way you are assigning the event handler. You're assigning the return value of buttonClick(event) which will be undefined. Just pass it the function itself. The event object will be passed automatically by jQuery

$("#Button1").bind("click", 
 { key1: "value1", key2: "value2" }, 
 buttonClick);

Answer 3

You can do it as following:

$('input[name="pin-code"], input[name="work-pin"]').on({
 keypress: function(e) {
 numbersOnly(e); //function
 }
 });
function numbersOnly(e) { //function
 e.preventDefault();
 if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
 return false;
 }
}

Answer 4

Here's how I passed the entire click event:

$('#body').click({event}, onClickMethod);
function onClickMethod(evt){
 console.log("Click evt:", evt);
}