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

报告相同问题?

悬赏问题

  • ¥15 centos7.9脚本,怎么排除特定的访问记录
  • ¥15 关于#Django#的问题:我的静态文件呢?
  • ¥15 关于CPLEX的问题,请专家解答
  • ¥15 cocos的点击事件 怎么穿透到 原生fragment上。
  • ¥20 基于相关估计的TDOA算法中的加权最小二乘拟合法matlab仿真
  • ¥20 基于相关估计的TDOA算法中的自适应加权广义互相关法。
  • ¥15 abaqus CAE 2024软件启动问题
  • ¥20 基于相关估计的TDOA算法中的局部互相关函数滤波matlab仿真
  • ¥15 CDH6.0.1 hue报错
  • ¥15 javaFX利用scene builder的fxml文件进行开发时的label setText方法未生效问题