How to pass event as parameter in jQuery function

Question

Hi, I am learning jQuery and I wrote a small function when I attach a function with a button click event.

this is an HTML header element

<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 HTML

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

This code is working fine. But when I try to write the buttonClick function outside the anonymous method, it no longer works.

I tried to call it this:

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

This does not work. Do I have an error when passing an event as a parameter? What is the correct way to do this without using anonymous methods?

Answer 1

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

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

calls buttonClick(event) immediately and which return undefined and sets it as a click handler . You must pass a link to a function, for example buttonClick , and you will automatically receive an event parameter (jQuery will send this when the handler is called).

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 comment):

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

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

And you should place this over its first use . In this case, before

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

Because function expressions not hoisted at the top of the current scope, e.g. function declaration . Therefore, you can use them only after expression was interpreted by the JS interpreter .

Answer 2

There are two errors in your decision: you have to change

var used only to define a variable, not a function parameter

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

Another thing is how you assign an event handler. You assign a return value to buttonClick(event) , which will be undefined . Just pass it the function. event object will be passed automatically jQuery

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

Answer 3

You can do it as follows:

 $('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; } }