Binding an existing JavaScript function in jQuery

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);
}

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.


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);
}