在 Edge 中触发单击文件输入时不会触发更改事件

Question

I'm having issues with uploading a file in Edge. The way I am currently doing it works in both Chrome and Firefox but not in edge.

<div id="banner-message">
    <button id="UploadButton">Upload</button>
    <input type="file" id="testUploader" style="display: none;" />
</div>

<script type="text/javascript">
    $("#UploadButton").on("click", function () {
        $("#testUploader").trigger("click");

        $("#testUploader").on("change", function() {
            console.log("change");
        });
    });
</script>

When I click on the upload button I am able to select a file to upload but when I choose a file nothing happens. Whereas when I choose a file in Chrome or Firefox the change event is fired and logged in the console.

Here is a working JSFiddle that shows the issue: https://jsfiddle.net/xpvt214o/34688/

Answer 1

I was able to solve this. I moved the change event to outside of the click event and all seems to be working now. Not sure why this is only an issue in Edge though.

Working:

<script type="text/javascript">
    $("#UploadButton").on("click", function () {
        $("#testUploader").trigger("click");
    });

    $("#testUploader").on("change", function() {
        console.log("change");
    });
</script>

Answer 2

changed "change" to "click" and it is working.

<script type="text/javascript">
    $("#UploadButton").on("click", function () {
        $("#testUploader").trigger("click");

        $("#testUploader").on("click", function() {
            alert("change");
        });
    });
</script>

Answer 3

This problem occurs because event listener is added after triggering click event. If you really need to add event listener in another listener you need to do it firstly and then trigger this event. So try this:

<script type="text/javascript">
    $("#UploadButton").on("click", function () {
        $("#testUploader").on("change", function() {
            console.log("change");
        });

        $("#testUploader").trigger("click");
    });
</script>