jqueryローダーが2回目に表示されない

Question

ローダーがサーバーサイドから来るまで、ローダーを呼びます。問題はローダーが来ていないときにファイルをアップロードした後です。 私はjqueryに新しいです。私を助けてください。 これは、あなたがOUTPUT1のdiv要素を空にしてはならないのコードスニペット

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data"> 
    <input id="doc" class="file" type="file" name="xls" data-min-file-count="1"> 
    <br> 
    <button type="submit" class="btn btn-primary">Submit</button> 
    <button type="reset" id="asd" class="btn btn-default">Reset</button> 
</form> 
<hr> 

<div class="panel panel-default"> 
    <div class="panel-heading">The suggestions will appear Here</div> 
    <div class="panel-body" id="output1"> 
    <img id="loader" src="30.gif" /> 
    </div> 
</div> 

<script> 
    $("img#loader").hide(); 
    $("#doc").fileinput({ 
    'allowedFileExtensions': ['xls'], 
    }); 

    $(document).ready(function() { 

    $("#asd").click(function() { 
     $("#output1").empty(); 
    }); 
    var options = { 
     target: '#output1', 
     beforeSubmit: function() { 
     $("img#loader").show(); 
     alert("hinnh"); 
     }, 
     success: function() { 
     $("img#loader").hide(); 
     } 
    } 

    $('#myForm').ajaxForm(options); 
    }); 
</script> 

Answer 1

です。ちょうど$("#asd").clickを更新する - 以下のコードで機能する。

$("#asd").click(function(){ 
    $("#output1").html('<img id="loader" src="30.gif" />'); 
    $("img#loader").hide(); 
    }); 

OR

$(document).ready(function() { 

$("#asd").click(function() { 
    $("#output1").empty(); 
}); 
var options = { 
    target: '#output1', 
    beforeSubmit: function() { 
    $("#output1").html('<img id="loader" src="30.gif" />'); 
    alert("hinnh"); 
    }, 
    success: function() { 
    $("img#loader").hide(); 
    } 
} 

$('#myForm').ajaxForm(options); 
});