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?

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?

• javascript
• jquery
• html

4 Answers 4

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.

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

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

Here's how I passed the entire click event:

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

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