jQuery which is the correct function definitions?

Question

I saw three different function definitions in jQuery. What is the correct way to use them?

Example 1:

function example() {
 // code here
 }

Example 2:

jQuery('#Example').click(function() {
 // code here
 });

Example 3:

var example = {
 demo : function() {
 // code here
 }
}

Why should I choose which?

• edkeveked: It depends on what you are doing. What do you want to achieve?
• Özgür Can Karagöz: why do not they all do the same thing?

Answer 1

There is no 'best' here, as each function definition is separate and serves different purposes. Also note that only the second example has anything to do with jQuery.

Your first example is just a vanilla JS function definition, nothing special about this.

Your second is a jQuery click event handler which is used to declare logic which should be executed when the click event occurs on the selected element.

The third example is a function definition inside an object, which can be useful when using an OOP approach (as if to declare a class/model), or just passing a collection of values around in your logic.

Answer 2

Example 1 and 3 have nothing to do with jQuery. These are vanilla javascript snippets.

On example 2, it's recommended to use this syntax instead :

jQuery('#example_container').on('click', '#Example', function(event) {
 // code here
});

This lets you delegate the event handling, which means even if you created that element after the page was loaded, the event will still be handled.

• Rory McCrossan: it's recommended to use this syntax instead... it's only recommended if dealing with dynamically appended elements. There's nothing inherently wrong with using a static event handler.
• Steve Chamaillard: Since OP seems to be a beginner, it's recommended for him to learn using this syntax early on, rather than stumbling upon unexpected problems. There's nothing wrong with making it easier for your future self :)
• charlietfl: That is opinion. Much easier to read and write short hand methods when you aren't delegating
• Özgür Can Karagöz: You can open the event a little bit more. I think this is the biggest difference.

Answer 3

Your first example:

function example() {
 // code here
 }

Is the way to define a function and it is going to be available depending on its scope.

The second example:

jQuery('#Example').click(function() {
 // code here
 });

You are not only defining a Function but you are adding this function into the click event for a html element that has the id "Example"

The third Example:

var example = {
 demo : function() {
 // code here
 }
}

You are defining a function inside an Object. So this function is going to be the method "demo" of the object "example" you just created.