CODEWITHSUNDEEP
javascriptjqueryhtml
Manas Saha
Manas Saha

Reputation: 1497

How to pass Event as a parameter in JQuery function

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?

Upvotes: 10

Views: 32414

Answers (4)

Chris Sprague
Chris Sprague

Reputation: 3592

Here's how I passed the entire click event:

$('#body').click({event}, onClickMethod);

function onClickMethod(evt){
    console.log("Click evt:", evt);
}

Upvotes: 0

Javed
Javed

Reputation: 303

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

Upvotes: 1

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13471

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.

Upvotes: 16

Andreas
Andreas

Reputation: 21911

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

Upvotes: 2

Related Questions