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 make it work. Okay, I'll just put the source code to make it clear what I want to accomplish.

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

Help ?

You want myFunc to be evaluated at click time versus at instantiation, correct? — Stefan Mai
– Stefan Mai, Commented Sep 22, 2011 at 6:48

scessor · Accepted Answer · 2011-09-23 07:15:27Z

10

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 also can 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 his own this. After calling clearFmt in this function this is no longer the clicked element. I have two similar solutions:

In your functions add a parameter called e.g. element and replace $(this) with element.

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

Calling the function you have to add the parameter $(this).

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

Also see my third jsfiddle.

-=-

An 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.

edited Sep 23, 2011 at 7:15

answered Sep 22, 2011 at 6:58

scessor

16.1k4 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mhd Over a year ago

Thanks alot! I use your 3rd jsfiddle solution.

Darin Dimitrov · Accepted Answer · 2011-09-22 06:48:50Z

4

The following should work as seen in this live demo:

function myfunc(bar) {
    alert(bar);
}

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

answered Sep 22, 2011 at 6:48

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Comments

Antti29 · Accepted Answer · 2016-01-20 08:01:41Z

1

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 don't use 'anyFuctionName' to declare any function then no need return method. just write your function simply like, yourFunctionName1().

in $document.ready section parameter is not issue. you just put your function name here. if you use 'anyFuctionName' function then you have to follow above format.

edited Jan 20, 2016 at 8:01

Antti29

3,03912 gold badges37 silver badges36 bronze badges

answered Jan 20, 2016 at 7:03

Abdur Rahman

1,6961 gold badge23 silver badges34 bronze badges

Comments

Ariel · Accepted Answer · 2011-09-22 06:53:58Z

0

function myfunc(e) {
  alert(e.data.bar); //this is set to "value"
}

$("#foo").click({bar: "value"}, myfunc);

answered Sep 22, 2011 at 6:53

Ariel

26.8k5 gold badges62 silver badges71 bronze badges

Comments

TheTechGuy · Accepted Answer · 2017-03-03 09:07:51Z

0

People are making this complicated, simply call directly as you would in Javascript

myfunc("value");

answered Mar 3, 2017 at 9:07

TheTechGuy

17.5k18 gold badges120 silver badges144 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related