jquery - document.ready 中声明的函数未定义？

Question

如果我在 document.ready 中声明一个函数，则会收到错误。像这样

$(document).ready(function(){
    function updateSizeOptions()
    {
        alert("updateSizeOptions");
    }

    var jGrid = $("#list_main");
    jGrid.jqGrid({
        url:'db.php?ajaxOp=getData',
            colModel:[
                $.extend(true,
                { name:'shape_id'
                  ,index:'shape_id'
                  ,edittype:'select'
                  ,formatter:'select'
                  ,editoptions: { onclick:"javascript:updateSizeOptions();" }
                }
                ,{}
            ]
        ....
});

它将给出错误:“ReferenceError:updateSizeOptions 未定义”。
但是如果我将函数移到 document.ready 之外，一切都会正常。
像这样

function updateSizeOptions()
{
    console.debug("updateSizeOptions");
}

$(document).ready(function(){
    var jGrid = $("#list_main");
....

为什么？

Answer 1

因为在 Javascript 中，在其他函数中声明的函数是本地引用，并且在其父函数的范围之外不可见。如果您想让 updateSizeOptions 函数全局可访问，您需要在全局命名空间中分配对它的引用，例如 window 属性:

window.updateSizeOptions = updateSizeOptions;