Click event for input file does not work for 2nd time

Question

Hi i have an ajax loaded form which contains a file input element. The application should be able to detect the change event on input and upload the selected file to server.

I ve tried to bind the change event on document and it works smoothly but only once. After the first upload if i try to click on the file input to open the file selection box i get no response even though i haven t messed up with the click event and did not load any extra content with ajax.

my code is as follows

The loaded HTML form :

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

The change event listener :

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

And in the file uploader plugin :

(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 (SOLVED) : The problem was wrong use of showLoading i used it in variables.father but i was trying to hide it from variables.input resulting to disabling it.

Answer 1

Because, after the first upload you are disabling the file button with the below code

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

Remove that and it will work for 2nd time too