輸入文件的點擊事件第二次不起作用

Question

嗨，我有一個包含文件輸入元素的ajax加載表單。應用程序應能夠檢測輸入的更改事件並將選定的文件上載到服務器。

我已經嘗試綁定文檔上的更改事件，並且它工作順利但只有一次。第一次上傳後，如果我嘗試點擊文件輸入打開文件選擇框，即使我沒有與點擊事件搞砸，並沒有加載任何額外的Ajax內容，我沒有得到任何迴應。

我的代碼如下

加載的HTML表單：

<form> 
    . 
    . 
    . 
     <div class="custom-file-upload" data-url="uploader.php"> 
      <input class="file-upload-input" placeholder="pdf/doc/ppt/zip" disabled /> 
      <div class="file-upload button"> 
       <span>Upload</span> 
       <input id="input-file" type="file" class="upload" /> 
      </div> 
     </div> 
    . 
    . 
    . 
</form> 

變化事件監聽器：

$(document).on("change","#input-file",function(event){ 
     $(this).fileUploader(event); 
}); 

，並在文件上傳插件：

(function($){ 
     var variables = { 
      input : null, 
      father : null, 
      file : null, 
      uploading : false 
     }; 
     var methods = { 
      proccess : function(event){ 
       if(!event.target.files){ 
        return false; 
       } 
       variables.uploading=true; 
       variables.file=event.target.files[0]; 
       variables.father.closest("form").attr("data-disabled","true"); 
       variables.father.showLoading("buttonR"); 
       variables.father.find(".file-upload-input").val(variables.file.name); 
       methods.upload(event); 
      }, 
      upload : function(event){ 
       var data= new FormData(); 
       data.append("file",variables.file); 
       $.ajax({ 
        url: variables.father.attr("data-url"), 
        type: 'POST', 
        data: data, 
        cache: false, 
        dataType: 'json', 
        processData: false, 
        contentType: false, 
        success: function(data, textStatus, jqXHR){ 
         variables.input.hideLoading("buttonR"); 
         variables.father.closest("form").attr("data-disabled","false"); 
         variables.uploading=false; 
         variables.father.find(".file-upload-input").val(""); 
         if(data.success){ 
          methods.populate(data); 
         } 
         else{ 
          $("body").textAlert(data.message,false,"notice"); 
         } 
        }, 
        error: function(jqXHR, textStatus, errorThrown){ 
         variables.input.hideLoading("buttonR"); 
         variables.father.closest("form").attr("data-disabled","false"); 
         variables.father.hideLoading("buttonR"); 
         variables.uploading=false; 
         variables.father.find(".file-upload-input").val(""); 
         variables.input.hideLoading("buttonR"); 
         $("body").textAlert("An error occured while trying to access server",false,"error"); 
        } 
       }); 
      }, 
      populate : function(data){ 
       variables.father.closest("form").find("input[name=filePath]").prop("value",data.file); 
       if(variables.father.closest("form").find("#tmp-popup-elem")){ 
        $("#tmp-popup-elem").remove(); 
       } 
       $("<div id=\"tmp-popup-elem\" class=\"br35 right\">\n\ 
        <h3><i class=\"fa fa-check green\"></i> <strong>"+variables.file.name+"</strong>&nbsp;&nbsp;("+(Math.ceil(variables.file.size/1024))+" KB)</h3>\n\ 
        </div>").insertAfter(variables.father); 
      } 
     }; 
    $.fn.fileUploader = function(event){ 
      variables.father=$(this).parent().parent(); 
      variables.input=$(this); 
      if(!variables.uploading){ 
       methods.proccess(event); 
      } 
      return $(this); 
    }; 

})(jQuery); 

EDIT（解決）：問題是錯誤使用showLoading的我把它用在variables.father但我想將其從變量輸入中隱藏起來導致禁用它。

Answer 1

因爲，第一次上傳後，你與下面的代碼

variables.input.attr("disabled","disabled"); 

禁用文件按鈕刪除，它會爲第2次工作太