Upload button unresponsive after first iteration JQUERY-CodePudding

I have a button that uploads the excel file.

<input type="file" id="input-excel" value="Choose File" accept=".xlsx" />

Below is an embedded script in the HTML to read the excel file and display it in the UI.

<script type="text/javascript">
    
   // read and display the records from excel file on the screen
   
    // passing in my button id here
    $('#input-excel').change(function (e) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(e.target.files[0]);

        reader.onload = function (e) {
            var excelData = new Uint8Array(reader.result);
            var wb = XLSX.read(excelData, { type: 'array' });
            console.log(wb);

            var htmlstr = XLSX.write(wb, {/* sheet: "Sheet1",*/ type: 'binary', bookType: 'html'});
            $('#wrapper')[0].innerHTML  = htmlstr;
        };
    });
</script>

@section scripts{

    <script src="~/Scripts/ViewModels/RmaCreation/rmacreation.js"></script>
    <script src="~/Scripts/knockout-3.2.0.js"></script>
    <script language="javascript" src="~/Scripts/xlsx.full.min.js"></script>

}

I am able to upload excel file in the first iteration. I can see the records from the excel file in the UI.

However, the button becomes unresponsive in the second iteration. How do I make this button responsive after every iteration?

CodePudding user response：

https://jsfiddle.net/03ut9zjs/2/

<input type="file" id="input-excel" value="Choose File" accept=".xlsx" />

<div id="wrapper">

</div>


    
   // read and display the records from excel file on the screen
   
    // passing in my button id here
    $('#input-excel').change(function (e) {
        $('#wrapper')[0].innerHTML ="";
        var reader = new FileReader();
        reader.readAsArrayBuffer(e.target.files[0]);
        reader.onload = function (e) {
            var excelData = new Uint8Array(reader.result);
            var wb = XLSX.read(excelData, { type: 'array' });
            console.log(wb);

            var htmlstr = XLSX.write(wb, {/* sheet: "Sheet1",*/ type: 'binary', bookType: 'html'});
            $('#wrapper')[0].innerHTML  = htmlstr;
        };
    });

You haven't included wrapper div in your code so i am not sure where/how you've placed it.

It seems to work fine in this fiddle. Are you able to recreate the issue here?