How to call javascript function with parameter in jquery event handler?

Question

I am stuck. Searched and tried for hours.

EDIT: I still can't get it to work. Ok, I’ll just put the source code to make it clear what I want to achieve.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> var date_fmt="yyyy-mm-dd"; var time_fmt="HH:MM"; var date_field="#id_start_0, #id_end_0"; //id refering to html input type='text' var time_field="#id_start_1, #id_end_1"; //id refereing to html input type='text' function clearFmt(fmt_type) { if($(this).val() == fmt_type) { $(this).val(""); } } function putFmt(fmt_type) { if($(this).val() == "") { $(this).val(fmt_type); } } $(document).ready(function() { $(date_field).attr("title",date_fmt); $(time_field).attr("title",time_fmt); $(date_field).click(function() { clearFmt(date_fmt); }); $(date_field).blur(function(){ putFmt(date_fmt); }); $(time_field).click(function(){ clearFmt(time_fmt); }); $(time_field).blur(function(){ putFmt(time_fmt); }); }); </script> 

Reference?

Answer 1

Use the jquery bind method:

 function myfunc(param) { alert(param.data.key); } $(document).ready( function() { $("#foo").bind('click', { key: 'value' }, myfunc); }); 

Also see my jsfiddle .

=== UPDATE ===

since jquery 1.4.3 you can also use:

 function myfunc(param) { alert(param.data.key); } $(document).ready( function() { $("#foo").click({ key: 'value' }, myfunc); }); 

Also see my second jsfiddle .

=== UPDATE 2 ===

Each function has its own this . After calling clearFmt in this function, this no longer a clearFmt item. I have two similar solutions:

In your functions, add a parameter called, for example. element and replace $(this) with element .

 function clearFmt(element, fmt_type) { if (element.val() == fmt_type) { element.val(""); } } 

When calling a function, you must add the $(this) parameter.

 $(date_field).click(function() { clearFmt($(this), date_fmt); }); 

Also see my third jsfiddle .

- = -

Alternative:

 function clearFmt(o) { if ($(o.currentTarget).val() == o.data.fmt_type) { $(o.currentTarget).val(""); } } $(date_field).click({fmt_type: date_fmt}, clearFmt); 

Also see my fourth jsfiddle .

Answer 2

The following should work as shown in this live demo :

 function myfunc(bar) { alert(bar); } $(function() { $("#foo").click( function() { myfunc("value"); }); }); 

Answer 3

 function myfunc(e) { alert(e.data.bar); //this is set to "value" } $("#foo").click({bar: "value"}, myfunc); 

Answer 4

 anyFunctionName = (function() { function yourFunctionName1() { //your code here } function yourFunctionName2(parameter1, param2) { //your code here } return { yourFunctionName1:yourFunctionName1, yourFunctionName2:yourFunctionName2 } })(); $document.ready(function() { anyFunctionName.yourFunctionName1(); anyFunctionName.yourFunctionName2(); }); 

Note: if you do not use 'anyFuctionName' to declare any function, then no return method is needed. just write your function simply, yourFunctionName1 ().

in the section parameter $ document.ready does not occur. you just put your function name here. if you use the "anyFuctionName" function then you need to follow the format above.

Answer 5

People make it complicated, just invoke directly, as you would in Javascript

MyFunc ("value");