function inside a JavaScript function in jQuery API

Question

Please take a look at the following function:

<script type="text/javascript"> 

$(function() 
{

    var dataresult = 0;

    $("#Structure #Toggle").click( function()       
    {
        if($("#Structure #Toggle").data("currentstage") )
        {           
            $("#AdvancedOptions").hide();
            $("#Structure #Toggle").html("Show Advanced Options");
            $("#Structure #Toggle").data("currentstage", false);
        }
        else
        {
            $("#AdvancedOptions").show();   
            $("#Structure #Toggle").html("Hide Advanced Options");
            $("#Structure #Toggle").data("currentstage", true);
        }           
    });

Here I have noticed a $(function() has another function defined on the line $("#Structure #Toggle").click( function() What does that means?

score 0 · Answer 1 · answered Nov 01 '13 at 22:39

$(function(){ tells jQuery to execute this function as soon as the document has been loaded. Once that happened, $("#Structure #Toggle").click( function() registers a listener for click events on the (overqualified) DOM element with the id "Structure" / "Toggle". It first selects that element and then adds the click listener which is another function.

score 0 · Answer 2 · answered Nov 01 '13 at 22:40

$(function() {...}); executes that function when after the DOM is loaded; it's short for:

$(document).ready(function() { ... });

When that function is run, it executes:

$("#Structure #Toggle").click(function() { ... });

This binds the inner function to the click event on the #Structure #Toggle element, so that function will be executed whenever you click on that.

score 0 · Answer 3 · answered Nov 01 '13 at 22:42

Means nothing special. It's really just another function.

Generally, a functions in JS is just another Object. It's not any different from any other type we have - numbers, strings, arrays, etc. There are two ways of assigning a function to a name. First we have

function something () {}

which is basically just a shortcut for this:

var something = function () {}

In the second form of that statement it's clearly visible, that the function is just a value to that variable. And, as with all values, you can pass them as parameters to functions.

That is, what is done here: first, there is the function $, which can take a function as it's first argument. So we give it one. Inside that function, we call another function: $(...).click(). That function, again, takes a function as argument - so we give it one. That's all, no magic here ;)

score 0 · Answer 4 · edited May 23 '17 at 10:25

This is because JavaScript treats functions as first class primitives. Consider the following statement:

jasons_age = 20;

And the following condition:

function canDrinkInTheUS(age) {
  if(age>21) {
     return true;
  } else {
     return false;
  }
}

Which you call like this:

canDrinkInTheUS(jasons_age);

Here a variable (age) value has been assigned a value (20), which 14 years ago canDrinkInTheUS(jasons_age) would return false. However you are reading this answer right now at which point it would no longer be accurate. A better way to express my age is as a function. In JavaScript you can make age a function, possibly like this (using this clever age calculator):

jasons_age_right_now = function() {
  return ~~((Date.now() - new Date(1978,12,25)) / (31557600000));
};

This lets up update our canDrinkInTheUS function to take a function as it's argument:

function canDrinkInTheUS(age) {
  if(age()>21) {
     return true;
  } else {
     return false;
  }
}

And to to call it we pass jasons_age_right_now like this:

canDrinkInTheUS(jasons_age_right_now);

Note that you are not adding the () and the end of jasons_age_right_now, this is because the function isn't being invoked until we are inside canDrinkInTheUS.

Because JavaScript lets you pass functions as arguments you can even return a function that itself takes arguments like this:

anyones_age_right_now = function(date_of_birth) {
  return function() {
    return ~~((Date.now() - date_of_birth) / (31557600000));
  };
};

Then change jasons_age_right_now to look like this:

jasons_age_right_now = anyones_age_right_now(new Date(1978, 12, 25));

Because jasons_age_right_now is a function then it can be passed to the updated canDrinkInTheUS().

score 0 · Answer 5 · answered Nov 01 '13 at 23:11

In Javascript it is possible to have functions inside other functions. In your case

$(function() {/*...*/})

is the function which is executed when the document is loaded. Inside this event you have a function which is attributed to a click event for any tag matching the selector of

$("#Structure #Toggle")

So after the document is loaded the event is defined and as long as the tags exist, they will listen to the click event associated to the function passed as a parameter to the click event to the tags matching the selector.

I have noticed that your selector contains two ids:

$("#Structure #Toggle")

If you have no specific reason to do this, then it is better to have

$("#Toggle")

instead, as ids should be unique, so your id of Toggle identifies the tag matched by the selector. It is better to keep things simple whenever possible.

Also, it is bad for health if you query for the same tag again and again.

Instead of repeating

$("#Structure #Toggle")

again and again do the following:

var structureToggle = $("#Structure #Toggle");

and whenever you need

$("#Structure #Toggle")

later on just use your structureToggle variable.

function inside a JavaScript function in jQuery API

5 Answers5