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.

Answer 2

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;
    }
}