Question

HTML：

<div id="header" p-include="components/header.htm" p-param="{'lblCurPos':'User Profile Page'}"></div>
<!--Other mark up here-->
<div id="footer" p-include="components/footer.htm" p-param="{'lblScreenID':'SYS-027'}"></div>

js代码：

/*Replace div that has p-include attr */
$(window).on('load',function() {
    $("div[p-include]").each(
        function () {
            p_include_replace(this);
            //p_include_replace2(this);
        }
    );   
});

//this works
function p_include_replace(obj) {
    //load html fragment
    $(obj).load($(obj).attr("p-include"), function(){
        //parse param
        param = JSON.parse($(obj).attr("p-param").replace(/'/g, '"'));        
        jQuery.each(param, function (k, val) {
            $("#" + k).html(val);
        });
    });
}

//this doesn't work
function p_include_replace2(obj) {
    //parse param    
    param = JSON.parse($(obj).attr("p-param").replace(/'/g, '"'));
    //load html fragment     
    $(obj).load($(obj).attr("p-include"), function(){        
        jQuery.each(param, function (k, val) {
            $("#" + k).html(val);
        });
    });
}

p_include_replace2不适用于标头，因为在执行load回调函数时，局部变量param会被覆盖并包含页脚的参数。

但为什么p_include_replace有效？如果两者都是父函数的局部变量，为什么在回调函数中使用obj / param会有所不同？

20170413编辑：

为了澄清，我已将代码更改为以下内容：

/*Replace div that has p-include attr */
$(window).on('load',function() {
    $("div[p-include]").each(
        function () {            
            p_include_test(this);           
        }
    );   
});


function p_include_test(obj) {
    param = obj.id + "param"
    console.log("Parent:" + obj.id);
    console.log("Parent param:" + param);
    $(obj).load($(obj).attr("p-include"), function(){
       console.log("Callback:" + obj.id);
       console.log("Callback param:" + param);   
    });
}

结果如下：

param和obj都已在回调之外进行了更改，为什么obj可以正确地在回调中保留2个不同的值而不是param？

Answer 1

两种情况下的内部函数（加载回调）都是异步的。因此，在您的第一种方法中，param仅在回调内部发生变化，这很好。

在第二种方法中，在不使用var的情况下更改回调之外的参数，因此全局更改param并在回调甚至调用一次之前进行进一步更改。此更改还会更改回调内部的param，因此结果不具有确定性。

Answer 2

替换div（或其他元素）后，您已从DOM中删除了某些内容并将其重新添加回来。因此，您需要使用委托。除非您查找已存在的父元素，否则您无法收听原本不属于DOM的内容。这个问题让我不止一次。

Check this out

为什么只有当它是父函数的输入参数时，才能在回调函数中访问局部变量？

2 个答案: