jQuery variable passing

Question

I am running through a few jQuery tutorials but I can not seem to find the awnser to this confusion.

<div id="container">
 <a href="#">Click Me</a>
 </div> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
 <script>
 function doSomthing(){
 aMessage = message;
 console.log(this);
 console.log(aMessage);
 }
 $('a').on('click', doSomthing)
 </script>

Looking at the code above as a user clicks the anchor tag and the doSomthing function runs.

However what i dont understand is why, if the code is changed to the following (adding the parenthesis to doSomthing), the doSomthing function runs immediately without clicking the anchor tag.

$('a').on('click', doSomthing())

Further from this what happens if I would like to pass a parameter when running doSomthing on click. For Example

<div id="container">
 <a href="#">Click Me</a>
 </div> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
 <script>
 function doSomthing(message){
 console.log(this);
 console.log(message);
 }
 $('a').on('click', doSomthing('face bash'))
 </script>

What I would normal expect is that after I have clicked the anchor tag the console would log 'this' and the passed string, however the doSomthing function is run as soon as the page loads and not when the anchor tag is clicked :S

How would you normal pass parameters to functions called through other functions :S?

• Felix Kling: Have a look at stackoverflow.com/questions/4897368/…
• Felix Kling: Whenever you put parenthesis () after a function, it is called. To assign a function as event handler, you have to pass function reference, and that is just the name of the function.

Answer 1

Maybe try

$('a').on('click', function(){
 doSomthing('face bash');
})

?

• Ben_hawk: Are you not then wrapping a function within an anonymous function? is that not bad practise, or untidy?
• Felix Kling: @Ben_hawk: No, this is pretty much standard practice in JavaScript. If you don't have to reference the function anywhere else, using anonymous functions is even cleaner IMO.
• John Green: It is untidy. You can un-anonymize the function with a descriptor: function() _doSomthingClosure{ doSomthing('face bash'); } However, it isn't bad practice per se. This kind of closure creation has been the de-facto norm for several years now.

Answer 2

You need to return a new function from the function:

 function doSomthing(message) {
 return function() {
 console.log(this);
 console.log(message);
 };
 }

Since you are passing the result of calling doSomthing to .click, the result must be a function not undefined.

$('a').on('click', doSomthing('face bash'))

Stays as it is.

Alternatively you could keep doSomthing in tact and just proxy (Currying is still undocumented and requires jQuery 1.6+) it:

 $('a').on('click', $.proxy(doSomthing, null, "face bash"))