How can I execute an external function when an element is clicked?

Question

I'm trying to execute an external function on click of a DOM element without wrapping it in another function.

Say I have a function called sayHello(), as follows:

function sayHello(){
  alert("hello");
};

To execute it on click, I currently have to do this:

$("#myelement").click(function(){
  sayHello();
});

Notice I am forced to wrap the single function call in yet another function. What I am trying to do is something like this

$("#myelement").click(sayHello());

Except that simply doesn't work. Can I avoid wrapping the single function call in another function in any way? Thanks!

.

Additional information: How would I achieve the same thing when I need to pass parameters to the function?

..

Additional information: Like Chris Brandsma and Jani Hartikainen pointed out, one should be able to use the bind function to pass parameters to the function without wrapping it in another anonymous function as such:

$("#myelement").bind("click", "john", sayHello);

with sayHello() now accepting a new parameter, as such:

function sayHello(name){
  alert("Hello, "+name);
}

This, unfortunately, does not seem to work... Any ideas? The Events/bind documentation is located here Thanks!

Answer 1

To pick up from a question you had in there.

Obviously, you need to call it this way to work:

$("#myelement").click(sayHello);

Calling it the way you had it actually executes the method instead of sending the method to the click handler.

If you need to pass data you can also call the method this way:

$("#myelement").click(function(){ sayHello("tom");});

Or you can pass data via the bind() function

function sayHello(event){ alert("Hello, "+event.data); }

$("#myelement").bind("click", "tom", sayHello);

Or you can retrieve data from the element that was clicked

$("#myelement").click(function(){sayHello($(this).attr("hasData");});.

Hope that helps.

Answer 2

You are calling the sayHello-function, you can pass it by reference by removing the parenthesis:

$("#myelement").click(sayHello);

Edit: If you need to pass parameters to the sayHello-function, you will need to wrap it in another function. This defines a parameter-less new function that calls your function with the parameters provided at creation-time:

$("#myelement").click(function () {
   sayHello('name');
   // Creates an anonymous function that is called when #myelement is clicked.
   // The anonymous function invokes the sayHello-function
});

Answer 3

$("#myelement").click(sayHello());

This is actually calling sayHello() before you set the click handler. It's trying to set the return value of sayHello() as the callback function!

Instead, try:

$("#myelement").click(sayHello);

And regarding your edit, if you need to pass parameters you can just use the closure technique you're already using, but if you're looking for something cleaner then check out How can I pass a reference to a function, with parameters?

Answer 4

what params would you be passing at the time of the click? if you know what they are in advance, you can set them before the user clicks.

you can't pass parameters but you can fake the parameter thing by simply adding members to the object which is firing the event, so..

myObject.onClick = sayHello;
myObject.param1 = "foo";

then, when you're calling this

function sayHello(){
  alert(this.param1);
}

Answer 5

The bind() method is now deprecated.

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

You are better off doing all event binding with the on() method for consistency. You can pass parameters to your handler as the second argument after the event name.

function sayHello(name){
    console.log('Hello ' + name);
};

$('#myelement').on('click', 'John', sayHello);

Answer 6

Yes, instead of passing sayHello(), just pass the function name.

$("#myelement").click(sayHello);