How to Call jQuery function from JavaScript with example

I have heard many times people saying that I need to call jQuery function from JavaScript. I told them there is no special technique to do that. Just put your fingers on your keyboard and start coding as you normally do. You will get to know that it’s very much easy. But now its really became a wanted question to me. Because so many people asked me this question during the last few months.

So here in this JavaScript tutorial, I will show you calling jQuery function from JavaScript with an example.

You may also interested in,

Add and remove class dynamically to an element using jQuery

Real Time Chat Application PHP With File Transfer System AJAX

Why use javascript:void(0) in hyperlinks?

Call jQuery function from JavaScript

the shortest way to declare a jQuery function is:

$(function(){
// Your code goes here
});

Now assume that you have a JavaScript function named: my_js_function()

Now you have to call a jQuery function from this my_js_function()

In order to access a jQUery function from a JavaScript function, you can declare a variable and assign it to a jQuery function. Finally, just call it from a JavaScript function.

var my_jquery_function;
// this is jQuery function
$(function(){
    my_jquery_function = function( _text )
    {
        alert( _text );
    }
})
// This is javascript function
function my_js_function()
{
    //Invoke jQuery Function
    my_jquery_function("I am called from a JavaScript Function");
}

In this way you can call a jQuery function from JavaScript.

How to run multiple JavaScript functions onclick

Get user’s Latitude and Longitude in JavaScript – HTML5 Geolocation

 

5 responses to “How to Call jQuery function from JavaScript with example”

  1. vincent says:

    It’s a bit annoying when people give an explanation such as “Just put your fingers on your keyboard and start coding as you normally do”. In your example, you seem to be DEFINING a jquery function. I don’t want to do that — I want to call a jquery function that already exists — namely the well known jquery function “ajax”. But even though I’m coding as I normally would — I still get “ajax is not defined” in the console.

    • Saruque Ahamed Mollick says:

      Did you include jquery in your file? If yes then check again if you are calling the function after the line jquery has been included. jquery needs to be loaded first.

  2. Yaidier says:

    your code above does not work! I spend an hour trying without good results 🙁

  3. Antonio Garrido says:

    Hello,
    I have a problem like this. I have a file name “myJQueryFile.js”, and other file in JS names “theFunctionCaller.js”. In “myJQueryFile.js” begin with the definition “$(function () {….”. Inside of the scope there is a function “myTargetFunction()”. I can not call “myTargetFunction()” from the function “myCallerFunction()” inside of the “theFunctionCaller.js”. Both files are in the html file and the “myJqueryFile.js” is called before “theFunctionCaller.js”. I tried everything and I can not use “myTargetFunction()”. I checked (with alert messages) that the definition of “myTargetFunction()” is load before the execution of “myCallerFunction()”. Is not working. The only way that the function was found, was when I define the “myTargetFunction()” inside of the “myJqueryFile.js”, but at the beginning, even before “$(function () {…..”. I think there is a problem with the scope. I am newbie with JQuery…. What could I try next?

  4. Dhahi says:

    Excellent example works fine. Thank you, you saved my time

Leave a Reply

Your email address will not be published. Required fields are marked *