CODEWITHSUNDEEP
javascriptjqueryevent-handling
Jack Mills
Jack Mills

Reputation: 6132

Binding an existing JavaScript function in jQuery

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?

Upvotes: 25

Views: 26384

Answers (4)

HoldOffHunger
HoldOffHunger

Reputation: 20851

Since this answer is tagged with event-handling, I suspect it would be useful to talk about the events, too. Your immediate problem, as stated by others, is simply to use the defined function function, and not call function(). The parens indicate to call the function, whereas you're trying to specify the function to use.

So, how do you handle the event? You only need to define it as the first argument of your function...

function fHardCodedFunction(event){
    console.log(event);
}

function fBindFunctionToElement(){
    $("#MyButton").bind("click", fHardCodedFunction);
}

The api.jquery.com documentation for bind() indicate as much, too. I have also put together a very small, working demo, to demonstrate event-handling.

HTML...

<input type="text" id="text">
<div id="main">Results appear here.</div>

JavaScript...

function clickFunction(e) { return $('#main').html(e.which); }
$('#text').bind('keypress', clickFunction);

Upvotes: 0

David Andres
David Andres

Reputation: 31781

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.

Upvotes: 4

Canavar
Canavar

Reputation: 48088

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

Upvotes: 2

Gumbo
Gumbo

Reputation: 655129

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

Upvotes: 37

Related Questions