Question

我正在尝试这个：

$(document).ready( function() {

    var myLayout = $('#layoutContainer').layout({
        west__size:         450
    ,   east__size:         250
    });

    function toggleFullView() {
        myLayout.toggle('west');
    }

    $('#mapFooter').prepend('<a href="#" onClick="toggleFullView();" title="Toggle full view of map">Full View</a>');

}); // end document.ready

当我点击.prepend（）创建的链接时，我一直收到错误'toggleFullView'。我已经尝试了各种各样的麻烦。如果我在onClick上放置toggleFullView函数的行我得到错误 - 'myLayout未定义'。

该怎么办？谢谢你的帮助。

Answer 1

这是因为toggleFullView存在于.ready()回调的范围内，而不是脚本的全局范围。

var MyModule = (function($) {
    // $ is now jQuery

    // This is only accessible from within MyModule
    var privateRyan = 'fubar';

    // Globally accessible with MyModule.toggleFullView
    this.toggleFullView = function() {
        myLayout.toggle('west');
    }

    $(document).ready( function() {
        // Do init stuff here
        var myLayout = $('#layoutContainer').layout({
                west__size:         450,
                east__size:         250});
        $('#mapFooter').prepend('<a href="#" onclick="MyModule.toggleFullView();" title="Toggle full view of map">Full View</a>');
    }); // end document.ready

})(jQuery); // () will execute this function immediately

您还可以创建链接，然后使用onclick附加事件处理程序并提供回调。

Answer 2

正如阿拉姆所说，这是一个范围问题。以“function funcName（）{...”格式声明的函数被认为是声明它们的作用域的本地函数。

要解决此问题，请执行以下操作之一：

1）使函数全局化（不理想 - 全局变为邪恶）

2）使用命名空间模式，在该模式上，需要全局访问的属性或方法（与全局不同）可以存在，例如。

var my_ns = {};
$(function() {
    my_ns.my_func = function() { alert('hello!'); };
    $('body').append("<a href='javascript:my_ns.my_func();'>click me</a>");
});

3）绑定一个click事件而不是使用链接的HREF - 这样你就可以存储对func的引用，即使它是在一个现在不可访问的范围内声明的，例如。

$(function() {
    var my_func = function() { alert('hello!'); };
    $('body').append($('<a />', {text: 'click me', href: '#'})).click(my_func);
});

UILayout的变量范围

2 个答案: