javascript function does not work within jquery $(document).ready block

Question

I am trying to call a JavaScript function from an onclick trigger.

HTML section:

<div class="my_radio">
    <input type="radio" name="my_radio" value="1" onclick="my_func()"/>  first button
</div><!-- end of class my_radio -->

And the JavaScript code

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func(){
            alert("this is an alert");
        }
    });
</script>

It does not work.

But if i keep the JavaScript function out of the $(document).ready() code, it works. Following is the relevant code snippet:

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func111(){
            alert("this is an alert");
        }
    });

    function  my_func(){
        alert("this is an alert");
    }
</script>

1) Why does not the first JavaScript code snippet work?

2) How can I get the first JavaScript code snippet working ?

EDIT :

SO FAR AS I KNOW, $(document).ready() is executed when the web page loads completely. So how can I prevent my_func() to be active before or after the complete page-loading if I write my_func() outside $(document).ready()?

duplicate question > http://stackoverflow.com/questions/4242541/function-not-calling-within-an-onclick-event — Glavić, Nov 27 '11 at 18:49
like Alien said > http://stackoverflow.com/questions/1047454/what-is-lexical-scope — Glavić, Nov 27 '11 at 18:51
possible duplicate of [How can I make a function defined in jQuery.ready available globally?](http://stackoverflow.com/questions/2223305/jquery-global-function) — Andy E, Nov 27 '11 at 18:54
@glavić , unintentionally duplicate.. will it affect my post negatively? — Istiaque Ahmed, Nov 27 '11 at 19:18
Don't know, it is not up to me. I suggest, that you do ALL your javascript in .ready(). This means, that you use .click() insted of hardcoded onclick="". — Glavić, Nov 27 '11 at 19:23

Didier Ghys · Accepted Answer · 2011-11-27T18:56:46.453

It's all about javascript execution contexts and scope.

Everything that you define within a function is know only in this function.

In your first test, the function my_func() can only be used within the ready callback (and in the inner other objects). You can't reference it outside.

In your second example, the function my_func() is global to the document and accessible from anywhere.

I recognize this is maybe a verry simple explanation :-)

score 5 · Answer 2 · answered Nov 27 '11 at 18:48

5

If you define your function within a callback, you can only use it within this callback:

$(document).ready(function(){
  function something(){
    alert('test');
  }

  //..

  something(); // Will work
}

something(); // Won't work

answered Nov 27 '11 at 18:48

Sgoettschkes

13,141
5
60
78

the necessary and unnoticed thing to me was, everything inside the $(document).ready is defined within a callback function – Istiaque Ahmed Nov 27 '11 at 19:11

score 1 · Answer 3 · answered Nov 27 '11 at 18:47

1

Your first snippet doesn't work, because in in the function my_func111 is defined within the local scope of an anonymous function passed as an argument in your $(document).ready call.

You can fix your code by placing the function definition to the document scope and calling it inside ready function such as:

function my_func(){
   alert("this is an alert");    
}

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

answered Nov 27 '11 at 18:47

jsalonen

29,593
15
91
109

what will have for onclick to do then? – Istiaque Ahmed Nov 27 '11 at 19:09
Now take your time and read through your answers with patience. They already contain all the information you need to understand and answer your problem! – jsalonen Nov 27 '11 at 20:20
i tried with ur code. the alert box shows up as soon as the page loads. clicking is not required there. – Istiaque Ahmed Nov 28 '11 at 05:32
Well obvious if you don't want the alert to appear onload, then remove the my_func() call from $(document).ready? This as far as I will go with my answer. I will leave the rest for you to figure out! – jsalonen Nov 28 '11 at 09:41
Istiaque: if your problem has been solved, consider accepting an answer in order to get help in the future as well! – jsalonen Nov 29 '11 at 08:00

score 0 · Answer 4 · answered Oct 26 '16 at 09:42

You'll add a global variable isReady. The $(document).ready callback section will change it to true.

Both your function and the isReady variable must be defined outside the callback of the $(document).ready, so that they can be seen from outside the scope of the callback.

<script type="text/javascript">
var isReady = false;    // outside the onReady callback

function  myFunc(){     // also outside the onReady callback
    if (!isReady) return; // abort if not ready

    alert("this is an alert");
}


// the onReady callback
$(function(){  // the newer jquery shorthand for: (document).ready(function(){
    isReady = true;
});

</script>

Your HTML code needs no changes. - I changed the names to use JS and HTML conventions, but essentially it's the same as what you originally wrote...

<div class="divMyRadio">

<input type="radio" id="myRadio" value="1" onclick="myFunc()"/>  first button

</div><!-- end of class divMyRadio -->

I As a side note: The newer JQuery uses $(function(){ as shorthand for $(document).ready(function(){ to make things easier for you.

score 0 · Answer 5 · answered Nov 27 '11 at 18:48

0

I presume by "it does not work", you mean it says "my_func is not defined" or similar?

When you define a function within a function, the inner function is not visible outside of the outer function (unless it is part of the outer function's return statement).

You'll need to learn about closures, a good tutorial on which can be found here.

answered Nov 27 '11 at 18:48

majelbstoat

12,889
4
28
26

yes, says 'undefined'. ur link says : The site's security certificate is not trusted! answer to my ques 2? getting familiar with closure .. – Istiaque Ahmed Nov 27 '11 at 19:05
sorry, i was mistaken in my previous comment to u. does not say anything. – Istiaque Ahmed Nov 27 '11 at 19:21

javascript function does not work within jquery $(document).ready block

5 Answers5

Linked