javascript - JQuery 无法从单独的 javascript 文件中找到变量

Question

我正在使用 cakephp 框架，我创建了 2 个单独的 javascript 文件并将它们放入我的 webroot/js 文件夹中。第一个 javascript 文件包含模式对话框变量，其中包含对话框的设置。第二个 javascript 文件包含其他单击事件处理程序，这些处理程序将数据发送到操作，然后打开对话框。

我遇到的问题是第二个文件使用第一个文件调用变量 $variablename 并且我收到一条错误消息，指出 varaibleName 未定义。

下面的一些代码可以向您展示我的意思。 从第一个文件开始:

var $editSel = $("#editSel_dialog").dialog(
{
    autoOpen: false,
    height: 530,
    width: 800,
    resizable: true,
    modal: true,
    buttons:
    {
        "Cancel": function()
        {
            $(this).dialog("close");
        }
    }
});

来自第二个文件:

$('.neweditSel_dialog').live('click', function()
{
    $.ajaxSetup({ async: false });

    var selected = [];

    $("#[id*=LocalClocks]").each(function()
    {
        if(false != $(this).is(':checked'))
        {
            var string = $(this).attr('id').replace('LocalClocks', '');
            string = string.substring(10);
            selected.push(string);
        }
    });

    if(0 === selected.length)
    {
        $selError.dialog('open');
        $selError.text('No Local Clocks Were Selected')
    }
    else
    {
        $.post('/LocalClocks/editSelected', { "data[Session][selected]": selected }, function(data)
        {
        });
        $editSel.load($(this).attr('href'), function ()
        {
            $editSel.dialog('open');
        });
    }
    return false;
});

当我使用 jquery-1.4.2.min.js 时，这是有效的，但我现在使用的是 jquery1.7。 我最终还将第一个文件与所有变量放入 $(document).ready(function(){}); 我尝试将第二个文件放入 document.ready() 函数中但这没有什么区别。

任何帮助都会很棒。 谢谢

Answer 1

您正在处理范围内的问题。在 JavaScript 中:

function foo() {
    var greet = "hi";
}

function bar() {
    console.log(greet); // will throw error
}

但是:

var greet;
function foo() {
    greet = "hi";
}

function bar() {
    console.log(greet); // will log "hi"
}

您必须在需要访问它的两个函数的公共(public)父级中定义变量。不幸的是，由于您没有使用任何建模约定或框架，那就是窗口对象( why are global variables bad? )。

因此，您必须定义 var $whateveryouneed 之前和之外 $(document).ready s。

另外，保留declaration和definition分开。您的定义实例化了一个 jQuery 对象，因此您必须将其封装在 $(document).ready() 中。 (使用 $(function() {}) 代替):

var $editSel;
$(function () {
    $editSel = $("#editSel_dialog").dialog(
    {
        autoOpen: false,
        height: 530,
        width: 800,
        resizable: true,
        modal: true,
        buttons:
        {
            "Cancel": function()
            {
                $(this).dialog("close");
            }
        }
    });
});