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

【问题标题】：JQuery can't find variable from separate javascript fileJQuery 无法从单独的 javascript 文件中找到变量
【发布时间】：2024-01-11 01:10:01
【问题描述】：

我正在使用 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(){}); 中

任何帮助都会很棒。谢谢

【问题讨论】：

找不到的是else子句中的$editSel变量。
$editSel。因为它是第一个文件中定义的唯一变量。
@techfoobar 我已经看到很多人列出代码作为示例，但实际上他们所要求的内容并没有任何关系。确保没有坏处。
在您的 HTML 中，第二个文件的脚本标签是否位于第一个文件的脚本标签之后？
@JonTaylor - 这是真的。我也见过不少这样的案例。

标签： javascript jquery variables undefined

【解决方案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"
}

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

因此，您必须定义var $whateveryouneed before 和 outside of 两者$(document).readys。

另外，将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");
            }
        }
    });
});

【讨论】：

我正在使用 cakephp 框架。我认为没有共同的父级，因为这两个文件都只是从我的视图文件中提取了 javascript。但为了测试这一点，我将合并这两个文件而不是从那里开始工作。
Javascript 框架。在更新的答案中定义一个全局变量应该可以解决您的问题，而无需合并文件。
嘿，你是对的，将对话框设置更改为一个函数，然后将全局变量调用 var $editSel 放在 document.ready() 调用之上。感谢您的帮助
没问题，看看我发的那些资源，有一些javascript的好技巧。

【解决方案2】：

我认为您不能保证触发处理程序的顺序，这意味着准备好的文档可能会以与您预期不同的顺序触发。您尝试在第二个文件中访问的变量是全局变量吗？尝试考虑您的变量范围，因为我认为这是问题所在。

【讨论】：

【解决方案3】：

您不能保证一个文件会在另一个文件之前加载。而且您不能保证一个文件中的 document.ready 会在另一个文件之前触发。

因此，我建议您将代码包装在函数中，并按照您需要的顺序在单个 document.ready 处理程序中调用它们。

例如：

function initVariables(){
    window.$editSel = ... // your code from the first file here
}

function initHandlers(){
    // your code from the second file here
}

然后：

$(document).ready(function() {
    initVariables();
    initHandlers();
});

您会注意到我使用了全局 window 对象来公开您的变量。如果你为它们使用一个公共的命名空间会更好。

【讨论】：