外包直接Ajax脚本

Question

我有一个html小页面，其中有一个用于文件上传的字段和一个由同一页面上的javascript ajax函数填充的输入字段：

<div class="input-group>
 <label>
  <span>Select 
   <input type="file" name="file" style="display: none;">
  </span>
 </label>
 <input type="text" readonly>
</div>                  

<script>
    $(function() {

        $(document).on('change', ':file', function() 
        {
            var input = $(this),           
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label]);
        });

        $(document).ready( function() 
        {
            $(':file').on('fileselect', function(event, label) 
            {

                var input = $(this).parents('.input-group').find(':text'),
                log = label;

                if( input.length ) {
                    input.val(log);
                } else {
                    if( log ) alert(log);
                }

            });
        });

    });
</script>

我想将脚本从index.html移到script.js文件，但是不起作用。我想这与不知道$（document）等有关。我不是JavaScript专家，因此需要一些帮助。