Jquery variable scope on Ajax loaded script
<p>I'm executing a script from an ajax loaded html but i'm getting <strong>"variable is not defined"</strong> error accessing the variable declared on parent html.</p>

<p>Here's my code:</p>

<p><strong>index.php</strong></p>

<pre><code>&lt;div id="ajaxLoad"&gt;&lt;/div&gt;
&lt;button id="buttonLoad"&gt;Load&lt;/button&gt;

&lt;script&gt;
    $(function () {
        var varFromMain = 1; // this is the variable

        $("#buttonLoad").click(function () {            
            $.ajax({
                url : "http://localhost/test/loaded.php",
                type : "get",
                data : "",
                async : true,
                success : function( data ) {
                    $("#ajaxLoad").html(data);
                },
                error: function(xhr, mesage, error) {
                }
            });

        });
    });
&lt;/script&gt;
</code></pre>

<p><strong>loaded.php</strong></p>

<pre><code>this is loaded from Ajax

&lt;script&gt;
    $(function () {
        alert(varFromMain);
    });
&lt;/script&gt;
</code></pre>

<p>Here's what i get on console:</p>

<p><a href="https://i.stack.imgur.com/nAegb.png" rel="nofollow"><img src="https://i.stack.imgur.com/nAegb.png" alt="console.log output"></a></p>

<p>Of course, I can access <strong>varFromMain</strong> successfully from the loaded script if i declare the variable globally.</p>

<pre><code>&lt;script&gt;
    var varFromMain = 1; // this is the variable, declared globally
    $(function () {

        $("#buttonLoad").click(function () {            
            $.ajax({
</code></pre>

<p>Can someone please explain this?</p>

<p>UPDATE:</p>

<p>I'll accept chen's answer below for this reason: I tried declaring another anonymous function on the same file and i'm already getting the same error. </p>

<p>So the variable is only accessible from the anonymous function that declared it. It is not destroyed though.</p>

<pre><code>&lt;body&gt;
    &lt;button id="buttonLoad"&gt;Load&lt;/button&gt;
    &lt;div id="ajaxLoad"&gt;
    &lt;/div&gt;
    &lt;button id="checkVarMain"&gt;Check Variable&lt;/button&gt;
    &lt;button id="checkFromFunc"&gt;Check From Jquery Function&lt;/button&gt;
&lt;/body&gt;
&lt;script&gt;
    $(function () {
        var varFromMain = 1;
        $("#buttonLoad").click(function () {
            var self = $("#ajaxLoad");
            $.ajax({
                url : "http://localhost/test/loaded.php",
                type : "get",
                data : "",
                async : true,
                success : function( data ) {
                    self.html(data);
                },
                error: function(xhr, mesage, error) {
                }
            });

        });

        $.fn.TestVarFromMain = function() {
            alert(varFromMain);
        }

    });

    $(function () {
        $("#checkVarMain").click(function () {
            alert(varFromMain); // get's reference error
        });

        $("#checkFromFunc").click(function () {
            $.fn.TestVarFromMain(); // Still displays the variable
        });
    });
&lt;/script&gt;
</code></pre>