Binding an existing JavaScript function in jQuery
Solution 1
The plain fHardCodedFunction
already refers to the function and the suffix ()
will just call it. So just pass the function instead of calling it and thereby just passing the return value:
function fBindFunctionToElement(){
$("#MyButton").bind("click", fHardCodedFunction);
}
Solution 2
Borrowing from the other posts, you can parameterize your event handler as follows:
function fHardCodedFunction(someValue) {
alert(this.id + " - " + someValue);
}
function fBindFunctionToElement() {
var someValue = "whatever";
$("#MyButton").bind("click",
function() {
fHardCodedFunction.apply(this, [someValue]);
}
);
}
$(document).ready
(
function() {
fBindFunctionToElement();
}
);
I'm using apply here because in function fHardCodedFunction
I'd like the this
property to refer to the MyButton
element. Note also that apply expects an array for the second parameter, which is why I've wrapped someValue
in brackets.
You don't have to do it this way and can forget about this this
property altogether if you prefer.
Solution 3
Yes you can bind methods that written somewhere else, but you should ignore the parentheses :
function fHardCodedFunction(){
//Do stuff
}
function fBindFunctionToElement(){
$("#MyButton").bind("click", fHardCodedFunction);
}
Related videos on Youtube
Comments
-
Jack Mills almost 4 years
Using jQuery I want to bind an existing function to a button. I've been through the documentation and have found the
bind
method but the examples on the jQuery site bind newly created functions where as I want to bind a function that's already defined, e.g:function fHardCodedFunction(){ //Do stuff } function fBindFunctionToElement(){ $("#MyButton").bind("click", fHardCodedFunction()); }
Is this possible? Or am I going about this the wrong way?
-
informatik01 over 6 yearsHere is the related section from the jQuery API documentation: Multiple Selector
-
-
Gumbo over 14 years@Jack Mills: Then you will need to use an (anonymous) wrapping function like
function() { return fHardCodedFunction("foo","bar"); }
that you pass as callback function tobind
. -
John C almost 12 yearsThis is almost what I'm trying to do (I'm using .click() instead, but as far as I can tell, it's the same). However, my bound function isn't working - does the bound function have access to the same variables as the click() function? Or maybe when using the syntax
$("#mydiv").click(function(){ $("#mydiv").hide();}
, there are hidden variables passed to the function? -
Jack Of Blades about 6 yearsIf you want to pass a parameter, you can call the outside function inside of your anonymous function, and pass the parameters in that way.