Call jQuery function from JavaScript

Question

I have some jQuery code:

$(function(){ 
function someFunc(){
    /*do something*/
};
.............   
});

And now I want call someFunc from JavaScript like below:

function test(){    
$.fn.someFunc();
}

But it doesn't work! I've seen an article how to call function in jquery from javascript. Is it possible?

`someFunc` is just a function defined inside another function... it has nothing to do with jQuery. — Felix Kling, Mar 20 '12 at 22:32

score 5 · Accepted Answer · answered Mar 20 '12 at 22:33

Just defining a function within the closure (function) you pass into $() doesn't do anything to put it on the jQuery fn object. To do that, you have to do it explicitly:

$.fn.someFunc = someFunc;

Typically, you wouldn't do this within a callback on $(), you'd do it earlier. Plug-ins do this to add functionality, which should already be present prior to DOM ready.

By way of example, here's a silly little plug-in that turns text green:

(function($) {
  $.fn.green = green;
  function green() {
    return this.css("color", "green");
  }
})(jQuery);

...which you might use from DOM ready:

jQuery(function($) {

  $(".foo").green();

});

Live example | Live source

Note that the call to it is from a jQuery instance, not directly from $.fn.

Thanks for the simple explanation. – zhihong Oct 19 '17 at 12:47 — zhihong, Oct 19 '17 at 12:47

score 1 · Answer 2 · answered Mar 20 '12 at 22:35

You function someFunc is not a "jQuery function", it is a function defined inside a (jQuery) DOMContentLoaded event handler.

You can't access it from outside because it is out of scope. Just declare it outside the load handler, and it will be accessible:

$(function(){ 
    // nothing here , but you can call someFunc() if you want
});

function someFunc(){
    /*do something*/
};

function test(){    
    someFunc(); // works!
}

The Alpha · Answer 3 · 2012-03-20T22:56:13.013

1

In jquery

$.fn.someFunc = myFunc;
function myFunc()
{
    // Code here
}

is similar to plain javascript's

function myObj()
{
    // Code here
}
var obj= new myObj();
obj.prototype.someFunc=myFunc;
function myFunc()
{
    // Code here
}

It's just a way to add a new property to an object (prototype inheritance) and jquery's fn is just an alias of javascript's prototype. To call my 'sumFunc' method that I have added earlier in to jquery object using

$.fn.someFunc = myFunc;

I can do

$('someElement').someFunc();

and this line will call taht function and do something to the 'someElement' (though I did nothing), hope it's clear enough. Look at T.J. Crowder's answer, it'll give you some more understanding.

edited Mar 20 '12 at 22:56

answered Mar 20 '12 at 22:50

The Alpha

143,660
29
287
307

*"... jquery's fn is just an alias of javascript's prototype..."* You mean `jQuery.prototype` (which is also, bizarrely, referenced from `jQuery.fn.init.prototype` because jQuery uses `new jQuery.fn.init` to create instances). – T.J. Crowder Mar 20 '12 at 23:14
Yes, take a look at this http://stackoverflow.com/questions/1755080/why-jquery-do-this-jquery-fn-init-prototype-jquery-fn, am I wrong with my understanding ? – The Alpha Mar 20 '12 at 23:19
`@Sheikh Heera`: I don't understand your question. All that link does is reiterate (incompletely) what I said above. Note that "javascript" != "jquery". – T.J. Crowder Mar 20 '12 at 23:23
@ T.J. Crowder, I asked you whether I'm wrong or right at I said "jquery's fn is just an alias of javascript's prototype", is my understanding wrong ? – The Alpha Mar 20 '12 at 23:31
`@Sheikh Heera`: "javascript's prototype" of *what*? The phrase doesn't make any sense to me just on its own. That's why I said "JavaScript != jQuery" – T.J. Crowder Mar 21 '12 at 08:56

Call jQuery function from JavaScript

3 Answers3