Javascript 作用域——var 与 global

Question

对于 currentUnknownBox，如果我使用“var”，预期的功能不会按预期工作(currentUnknownBox 成为第一个被点击的元素)。如果我删除 var，它会按预期工作。我假设这与全局范围有关。谁能给我解释一下？

jQuery(".box.unknown").live('click',function()
{
    var currentUnknownBox = this;

    //if we are NOT on mobile, use jQuery UI dialog
    if (!Drupal.settings.is_mobile)
    {
        jQuery("#letter-input-dialog").dialog();

        jQuery('#letter_input_form').submit(function()
        {
            var letter = jQuery("#letter_input").val();
            jQuery("#letter-input-dialog").dialog('close');
            jQuery("#letter_input").val('');
            that.validateAndSaveLetter(currentUnknownBox, letter);
            //Do not let the form actually submit
            return false;
        });
    }
    else
    {
        var letter = prompt('Please enter a letter to use in your guess');
        that.validateAndSaveLetter(that.currentUnknownBox, letter);
    }
});

编辑:问题是我每次都重新声明我的提交功能。

Answer 1

问题是每次单击其中一个时，您都会向表单添加一个新 提交事件处理程序。但是第一个总是先开火。当您不声明 var 时，您将覆盖第一个处理程序正在查看的变量。但错误是每次都添加一个新的处理程序。我会这样做:

var currentUnknownBox;
jQuery('#letter_input_form').submit(function()
    {
        var letter = jQuery("#letter_input").val();
        jQuery("#letter-input-dialog").dialog('close');
        jQuery("#letter_input").val('');
        that.validateAndSaveLetter(currentUnknownBox, letter);
        //Do not let the form actually submit
        return false;
    });
jQuery("#letter-input-dialog").dialog({autoOpen: false});

jQuery(".box.unknown").live('click',function(){
    currentUnknownBox = this;

    //if we are NOT on mobile, use jQuery UI dialog
    if (!Drupal.settings.is_mobile)
     {
       jQuery("#letter-input-dialog").dialog('open');
      } else {
        var letter = prompt('Please enter a letter to use in your guess');
       that.validateAndSaveLetter(currentUnknownBox, letter);
      }   
});

顺便说一句，.live 已被弃用。你应该使用 .on相反。