奇怪的JQuery location.reload（）行为？

Question

这是我的javascript代码，当用户单击HTML中的浏览按钮时，将调用该代码：

function run(){
console.log('run();')
document.getElementById('csv_file_upload').addEventListener('change', read_csv, false);

$('#csv_file_upload').click(function() {
    location.reload();
    console.log('reload();');
});}

这是我的HTML代码的一部分：

<div id="dvImportSegments" class="fileupload ">
    <fieldset>
        <legend>Upload your CSV File</legend>
            <input type="file" name="File Upload" id="csv_file_upload" accept=".csv" onclick="run();" />
   </fieldset>
</div>

<div id="data-display"></div>

下面是指定我的问题的屏幕截图：

1）这是我的页面的样子：

2）当我单击浏览按钮时，它将运行javascript中的 run（）函数。

3）选择数据后，函数的另一部分将发挥作用。到目前为止，一切都很好。

4）然后，当我想浏览另一个.csv文件时，单击浏览按钮，然后单击它，将激活JQuery reload（），并且div中的先前内容当我选择另一个csv文件时，将自动清除。当我选择另一个csv文件时出现问题。该页面不会在javascript中运行run（）。

5）重新加载的页面没有任何显示。为什么会这样呢？有什么解释吗？有人可以帮我这个忙吗？

Answer 1

似乎您在浏览新文件时试图清除先前选择的文件。

替换此：

location.reload();

由此：

$(this).val("");

Here is the JSFiddle demo

只需清除控件的值即可，而无需重新加载页面（这会导致最初附加的事件丢失，即使您打开了浏览窗口也是如此）

Answer 2

我已经找到方法。

$('#csv_file_upload').click(function() {
    $(this).val("");
    if($("#data-display").length > 0) {
        console.log("Delete yo");
         $("#data-display" ).remove();
    }

我首先删除特定的标签，然后使用appendTo（）在代码的其他部分创建一个新标签。然后将数据添加到新标记中：）