为什么我得到ReferenceError：框没有定义错误

Question

我已经声明了一个全局变量，并且正在使用它从多选事件中捕获一个值。但是，我很困惑，为什么我在模态窗口中出现这个错误。有趣的是，其他变数部，地址工作正常。

在萤幕控制台中，我可以看到正确显示的值。如果有人能指出我的错误，我将不胜感激。谢谢

声明var箱子的代码;

<script> 

     $(function() { 
      var boxes; 
      $('.switch-item').click(function (e) { 
       e.preventDefault(); 

       var src = $(this).data('src'); 
       var dst = $(this).data('dst'); 
       var sel = $('#' + src + ' option:selected').detach(); 
       $('#' + dst).append(sel); 
       $("#boxdest option:selected").prop("selected", false) 
       $('#srcBoxRslt').val(''); 
       $('#srcBox').val(''); 
       $('#counter').html('Total selected boxes for destruction: ' + $('#boxdest2 option').length); 
       $("#submit").prop("disabled", false); 

       boxes = $('#boxdest2').val(); 
       console.log(boxes); 

      }); // end click 

      $('form').submit(function() { 
       if ($('#boxdest2').children().length == 0) { 

        notif({ 
         type: "error", 
         msg: "<b>ERROR:<br /><br />You must enter some box(es) for destruction</b><p>Click anywhere to close</p>", 
         height: 99, 
         multiline: true, 
         position: "middle,center", 
         fade: true, 
         timeout: 3000 

        }); 


        return false; 
       } 
       $('#boxdest2 option').prop({ 
        selected: true 
       }); 

      }); 

     }); 
</script> 

错误是在此代码

<script type="text/javascript"> 
$(function() { 
    $('#destroy').click(function (e) { 
     $.Zebra_Dialog(
      'Department: ' + depts + 
      '<br />' + 
      'Address: ' + address + 
      '<br />' + 
      'Boxes: ' + boxes <--- ERROR 
     ,{ 
      'type': 'confirmation', 
      'title': 'Destroy' 
     }); 
    }); 
}); 
</script> 

Answer 1

<script> 
     var boxes; // this is the global scope. 

     $(function() { 
      var boxes; // Should not be here. This not the global scope. This is the scope of the function (which is passed on document.ready event) 

     }); 
</script>