Istiaque Ahmed Istiaque Ahmed - 1 month ago 7
Javascript Question

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

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 js/jquery section is :

<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 js function out of the $(document).ready section, 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>


works.

1) Why does not the first js.jquery code snippet work?

2) How can I get the first js/jquery 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?

Answer

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 :-)

Comments