jQuery ajaxFileUpload

Question

我正在使用ajaxFileUpload以及codeigniter来上传图片。如果我浏览图片，图片已上传。上传图像后，我将在图像后显示图像以及取消按钮(#cancel)。我为取消按钮编写了代码，它从服务器上删除了图像。它工作正常。但取消图像后，整个过程并不像第一次那样。

代码如下

$(function() {    
   $('#item_photo_uload').change(function(e) 
   {   
       e.preventDefault();       
       $.ajaxFileUpload({
         url            :site_url+'/menu/upload_file',
         secureuri      :false,
         fileElementId  :'item_photo_uload',
         dataType       :'json',
         success  : function (data,status)
         {             
            if(data.status != 'error')
            {
               $('#one_file').html('<img src="'+base_url+'assets/images/item_photo/'+data.file_name+'" height="50" width="100"/><img id="cancel" title="Cancel This Image" src="'+base_url+'assets/images/item_photo/cancel.png"/>' );

                $('#cancel').click(function()
                {
                  if (confirm('Are you sure you want to delete this file?'))
                    {
                        $.post(site_url+'/menu/delete_file',{file_name: data.file_name},function(data)
                        {
                            if(data)
                            {
                                $('#one_file').html('');                                
                                $("#item_photo_uload").prop('disabled', false);
                                $("#item_photo_uload").val("");   

                            }
                        });    
                    }
                });             
             }
         }            
      });

      $("#item_photo_uload").val("");         
      $("#item_photo_uload").prop('disabled', true);

      return false;
   });
});   

此处#one_file是显示图片的div，#item_photo_uload是浏览文件的输入字段。