How to run a function in jquery

Question

I'm a programming newbie, and I can't figure out how to store a function in JQuery and run in it multiple places.

I have:

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

  });

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

});

Now the 2 "//Doo somethings" are the same, 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);

});

That would run the function on page load, rather than only when it clicks.

How do I do this correctly?

Thanks!

score 111 · Accepted Answer · answered Jul 28 '09 at 03:43

111

The following should work nicely.

$(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 are declaring your function in the same scope as your are using it (JavaScript uses Closures to determine scope).

Now, since functions in JavaScript behave like any other object, you can simply assign doosomething as the function to call on click by using .click(doosomething);

Your function will not execute until you call it using doosomething() (doosomething without the () refers to the function but doesn't call it) or another function calls in (in this case, the click handler).

answered Jul 28 '09 at 03:43

Andrew Moore

93,497
30
163
175

1

Thank you for way 2, I'll have to try that. But the function is indeed ran on page load because in jquery $(function() is shorthand for document load. So way 1 at least, will not work. – Corin Jul 28 '09 at 03:58
3

I am very new to jQuery, so can you explain the first line `$(function() {`? What is the purpose of this line, please? tyvm – Thang Pham Jul 24 '12 at 02:27
12

$ is a shorthand for 'jQuery'. So everytime you see '$' somewhere, you have to think this is the jQuery function, the $(function(){}); will make it so that no particular event is specified: the code will be executed when the document is ready. $(function(){}); === jQuery(document).ready(function(){}); or $(document).ready(function(){}); – Jeff Noel Jul 25 '12 at 17:19

score 29 · Answer 2 · answered Jul 28 '09 at 11:21

29

I would do it this way:

(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 document ready you can do stuff like this:

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

answered Jul 28 '09 at 11:21

noboruwatanabe

309
2
6

3

Does creating a function outside the "document ready" actually provide any benefits? – Navigatron Sep 28 '12 at 02:22
@Nuktu yes, for plugin development. – Scott Sword Jan 02 '13 at 04:07
If you're using $ in the function parameter, then why bother calling it jQuery instead of using $ again? – Ben Taliadoros Mar 12 '13 at 11:52
It passes jQuery so that this version works even if you have other libraries that assign to $. The formal parameter and its uses inside the function have local scope and thus won't conflict the way the passed object name could. – Timberline Aug 07 '13 at 15:03
why do you have the $ in the parens instead of before – PositiveGuy Feb 13 '14 at 22:42

score 18 · Answer 3 · edited Nov 15 '11 at 05:09

18

function doosomething ()
{
  //Doo something
}


$(function () {


  $("div.class").click(doosomething);

  $("div.secondclass").click(doosomething);

});

edited Nov 15 '11 at 05:09

Sam Saffron

128,308
78
326
506

answered Jul 28 '09 at 03:44

Vincent Ramdhanie

102,349
23
137
192

score 11 · Answer 4 · answered Jul 28 '09 at 03:46

11

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

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

answered Jul 28 '09 at 03:46

1

Nice when f.e div.secondclass doesn't exist yet... NOT! – bicycle Dec 12 '12 at 16:11

score 5 · Answer 5 · answered Oct 09 '12 at 09:58

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

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

And the way to call it:

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

score 2 · Answer 6 · answered Jul 14 '12 at 11:12

2

Is this the most obfuscated solution possible? I don't believe the idea of jQuery was to create code like this.There's also the presumption that we don't want to bubble events, which is probably wrong.

Simple moving doosomething() outside of $(function(){} will cause it to have global scope and keep the code simple/readable.

answered Jul 14 '12 at 11:12

Steve

827
1
11
16

But if it is used only in JQuery functions, it is much better not to pollute the global scope and keep it where it belongs. – Johnride Mar 10 '14 at 19:56

score 0 · Answer 7 · answered Jun 13 '21 at 16:40

0

Simple way that I do it in Modern JavaScript:

$(
  $("div.class").click(() => {doosomething});
  $("div.secondclass").click(() => {doosomething});
);

answered Jun 13 '21 at 16:40

Zaffer

1,290
13
32

How to run a function in jquery

7 Answers7

Linked