Passing a jQuery event as a variable

Question

You can do this with JavaScript:

function bar(test) {
    alert(test);
}
var foo = bar;
foo('hi');

I'd like to be able to do something similar with a jQuery event:

var foo = $('#bork').click;
foo(function() { alert('I was just clicked.'); });

However, I get an error when the page loads: this.bind is not a function. Am I doing something wrong with the events here? Is there a better way to get the same effect?

Answer 1

I think you are looking for the bind function.

$('#bork').bind("click", function() { 
    alert('I was just clicked.'); 
});

Answer 2

Try the following:

$("#bork").bind("click", function() { alert("I was just clicked"); });

Answer 3

$('#bork').bind('click', foo);
function foo() { alert('i was just clicked'); }

Answer 4

You need to define foo as a function to make your sample work. If you change the definition of foo a little it will work:

var foo = function(f) {$('#bork').click(f);};
foo(function() { alert('I was just clicked.'); });

Answer 5

The other answers don't seem to be addressing the technical question:

Why does this work:

$('#bork').click(function() { alert('I was just clicked.'); });

But not this:

var foo = $('#bork').click;
foo(function() { alert('I was just clicked.'); });

The two appear to be the same, but the problem is that "this" within the implementation of the click function refers to the jQuery object in the first example, but it refers to foo in the second example. Since you have not defined foo.bind, the call to "this.bind" in the implementation of click fails.

Here is a great article about the ins and outs of binding/scoping in Javascript.