CODEWITHSUNDEEP
jquerydocumentdocument-ready
user398341
user398341

Reputation: 6577

jQuery - function inside $(document).ready function

Is it correct to create functions inside of

$(document).ready(function() {

like so: 

$(document).ready(function() {
     function callMe() {

     }
 });

The function inside of the .ready() does not have to call before DOM is ready and event inside of the ready() is triggered.

Just to clarify a little bit - here's the code which would illustrate the problem:

$(function() {
    var ind = 0;

    // some event is executed and changes the value of the ind

    // another event which affects the ind variable

    // and another one - after this event we call our function


    // there's another event - and we call our function again

The function which I need to call needs the updated value of the ind variable - which I guess I could pass as a parameter, but is there a better way of doing it?

Also - another important thing is that the function() in question can also change the value of the ind variable - for instance incrementing it (ind++).

Upvotes: 37

Views: 88416

Answers (9)

Md Shahriar
Md Shahriar

Reputation: 2736

<input type="button" value="Click Me!" onclick="Demo();" />


<script>

    $(document).ready(function () {

        Demo = function () {
            alert("Hello World");
        };
    });

</script>

Upvotes: 0

Mike Richards
Mike Richards

Reputation: 5667

Yes, you can do that, it's just a matter of scope.

If you only need to access callMe() from within $(document).ready(function() { }), then it's fine to put the function there, and offers some architecture benefits because you can't access the function outside of that context.

If you need to use the callMe() function outside of document ready though, you need to define the callMe() function outside of that context.

function callMe() {
  // Do Something
}

$(document).ready(function() {
  callMe();
});

UPDATE

Based on your clarification, you have two options:

1) DECLARE variable outside of ready(), but then define variable inside of ready():

var someVariable;
function callMe() {
  someVariable++;
  alert(someVariable);
}

$(document).ready(function() {
  someVariable = 3;
  callMe(); // Should display '4'
});

2) Within ready(), define variables using window.yourVariable = 'whatever';

Upvotes: 60

vinod raman
vinod raman

Reputation: 1

You can use like the following:

$(document).ready(function () {
    printReport = function(rowIndex) {
        // Your code here
    }
});

You can call this function from any event.

Upvotes: 0

Manas Yadav
Manas Yadav

Reputation: 1

See if you can eliminate the need for using document.ready by moving your tag to the bottom of the html file. This should make things alot simpler. Otherwise, declare the function outside the scope of the document.ready and just call it in the document.ready function scope.

Upvotes: 0

Daniel James Canil
Daniel James Canil

Reputation: 326

This will also work.

$(document).ready(function() {
      callMe = function() {
            alert('hello');
      }
});

callMe();

If you use 

 var callMe = function () { ... }

It may not work and you may get an error "function is undefined"

Upvotes: 5

rntperes
rntperes

Reputation: 31

You can do like that: 

$(document).ready(function(){

    var callMe = function(){
       //enter code here
    }

    $(".my-class").on("click", function(){
       callMe();
    });

});

So, you don't need to put the function outside the document ready and the code becomes grouped and more organized. ;)

Upvotes: 3

PhD
PhD

Reputation: 11334

This is definitely legal. The question is why do you want to do it? Probably to bind the function's scope to that of ready and not have it globally bound to the window object. But is that what you really want? I suggest having a look on function closures in javascript and how it handles scoping. to help clarify the need for it...

Upvotes: 0

Tomas Kohl
Tomas Kohl

Reputation: 1388

When you create a function inside $(document).ready, it's guaranteed that it won't be called before the document has loaded. Of course, it can only be called from that event handler itself (somewhere later in the event handler).

In other words, what you're trying to do is valid (though not necessarily desirable - you'd have to reveal more about what you are trying to accomplish).

Upvotes: 2

soulBit
soulBit

Reputation: 448

It is probably a better idea to call the function directly like so:

$(document).ready(myFunction);

function myFunction() {

   // Your code here

}

Upvotes: 2

Related Questions