Bind function( with parameters) to click event with Jquery

Question

This works:

HTML:

<div id="mydiv">Help!</div>

CSS:

div {
    background-color: red;
}

Jquery:

function myfunction( c1 ) {
    $("#mydiv").css({'background-color': 'blue' });
}

$("#mydiv").on('click',  myfunction );

I understand that using () immediately after a function calls that function.

So...

How can I bind a function to a click, and pass parameters at the same time?

HTML:

<div id="mydiv">Help!</div>

CSS:

div {
    background-color: red;
}

Jquery:

function myfunction( c1 ) {
    $("#mydiv").css({'background-color': c1 });
}

$("#mydiv").on('click',  myfunction("blue") );

Guffa · Accepted Answer · 2015-10-20 01:07:32Z

3

You can wrap the call in a function expression, and use the call method to set the context for the call as the context in the event handler:

$("#mydiv").on('click', function(){ myfunction.call(this, "blue"); });

answered Oct 20, 2015 at 1:07

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

2 Comments

RedBeardPro Over a year ago

Thank you! I was messing around with a fiddle trying to get this to work before i realized i didn't have a jquery library selected. Your answer works, and for future readers i'll say that this also works . . . . . . . . . . . . . . .$("#mydiv").on('click', function(){ myfunction("blue") });

Guffa Over a year ago

@RedBeardPro: Yes, that works as long as you don't use this in the function to access the element where the event happened.

Jerome Anthony · Accepted Answer · 2015-10-20 01:14:38Z

0

The jquery on event binding function has a 'data' parameter. .on( events [, selector ] [, data ], handler )

http://jsfiddle.net/aNDgC/101/

$('#myButton').on("click", {name: "world"} , function(event){
    $('#divOutput').html(event.data.name);
});

edited Oct 20, 2015 at 1:14

answered Oct 20, 2015 at 1:07

Jerome Anthony

8,0912 gold badges44 silver badges32 bronze badges

Collectives™ on Stack Overflow

Bind function( with parameters) to click event with Jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related