為什么我收到ReferenceError：框未定義錯誤

Question

我已經聲明了一個全局變量，並且正在使用它來從多次選擇事件中捕獲值。 但是，我很困惑為什么在模態窗口中出現此錯誤。 有趣的是，其他var部門，地址都可以正常工作。

在Firebug控制台中，我可以看到值顯示正確。 如果有人可以指出我的錯誤，我將不勝感激。 謝謝

聲明var box的代碼；

<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>