doukan4039 2016-10-18 03:10
浏览 42
已采纳

Ajax加载脚本上的Jquery变量范围

I'm executing a script from an ajax loaded html but i'm getting "variable is not defined" error accessing the variable declared on parent html.

Here's my code:

index.php

<div id="ajaxLoad"></div>
<button id="buttonLoad">Load</button>

<script>
    $(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) {
                }
            });

        });
    });
</script>

loaded.php

this is loaded from Ajax

<script>
    $(function () {
        alert(varFromMain);
    });
</script>

Here's what i get on console:

console.log output

Of course, I can access varFromMain successfully from the loaded script if i declare the variable globally.

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

        $("#buttonLoad").click(function () {            
            $.ajax({

Can someone please explain this?

UPDATE:

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.

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

<body>
    <button id="buttonLoad">Load</button>
    <div id="ajaxLoad">
    </div>
    <button id="checkVarMain">Check Variable</button>
    <button id="checkFromFunc">Check From Jquery Function</button>
</body>
<script>
    $(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
        });
    });
</script>
  • 写回答

3条回答 默认 最新

  • dongningce9075 2016-10-18 03:36
    关注

    It goes like:

    1. anonymous function is called, varFromMain is declared in the function scope
    2. AJAX request sent
    3. AJAX request success
    4. Success callback is run (new JS printed).
    5. (Right after the callback is complete) Anonymous function complete, scope destroyed, varFromMain is no more.
    6. new JS run.

    And if you declare the varFromMain globally it always stays at the document scope.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?