How to run a function in jquery

Question

I am new to programming, and I cannot figure out how to save a function in jQuery and run several places in it.

I have:

$(function () { $("div.class").click(function(){ //Doo something }); $("div.secondclass").click(function(){ //Doo something }); }); 

Now 2 "// Doo somethings" match, and I don't want to write the same code again.

If I put:

 $(function () { function doosomething () { //Doo something } $("div.class").click(doosomething); $("div.secondclass").click(doosomething); }); 

This will trigger the function when the page loads, not just when clicked.

How to do it right?

Thank!

Answer 1

The following should work well.

 $(function() { // Way 1 function doosomething() { //Doo something } // Way 2, equivalent to Way 1 var doosomething = function() { // Doo something } $("div.class").click(doosomething); $("div.secondclass").click(doosomething); }); 

Basically, you declare your function in the same scope in which you use it (JavaScript uses Closures to define the scope).

Now, since functions in JavaScript behave like any other object, you can simply designate doosomething as a function to be called by click using .click(doosomething);

Your function will not be executed until you call it with doosomething() ( doosomething without () refers to the function but does not call it) or calls another function (in this case, the click handler).

Answer 2

I would do it like this:

 (function($) { jQuery.fn.doSomething = function() { return this.each(function() { var $this = $(this); $this.click(function(event) { event.preventDefault(); // Your function goes here }); }); }; })(jQuery); 

Then on the finished document, you can do the following:

 $(document).ready(function() { $('#div1').doSomething(); $('#div2').doSomething(); }); 

Answer 3

 function doosomething () { //Doo something } $(function () { $("div.class").click(doosomething); $("div.secondclass").click(doosomething); }); 

Answer 4

Alternatively (I would say, preferably) you can do it like this:

 $(function () { $("div.class, div.secondclass").click(function(){ //Doo something }); }); 

Answer 5

You can also do this. Since you want one function to be used everywhere, you can do this by calling JqueryObject.function (). For example, if you want to create your own function to control any CSS for an element:

 jQuery.fn.doSomething = function () { this.css("position","absolute"); return this; } 

And the way to call it:

 $("#someRandomDiv").doSomething(); 

Answer 6

Is it possible that this is the most confusing solution? I do not believe jQuery's idea was to create such code. There is also the assumption that we do not want to bubble events, which is probably incorrect.

The simplest move doosomething() outside of $(function(){} will make it have a global scope and keep the code simple / readable.