爲什麼我得到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>