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

【问题标题】：Change event isn't fired when triggering click on file input in Edge触发单击 Edge 中的文件输入时不会触发更改事件
【发布时间】：2020-02-21 01:11:36
【问题描述】：

我在 Edge 中上传文件时遇到问题。我目前这样做的方式适用于 Chrome 和 Firefox，但不适用于边缘。

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

当我点击上传按钮时，我可以选择要上传的文件，但是当我选择文件时，什么也没有发生。而当我在 Chrome 或 Firefox 中选择文件时，会触发更改事件并记录在控制台中。

这是一个显示问题的有效 JSFiddle： https://jsfiddle.net/xpvt214o/34688/

【问题讨论】：

你试过没有display: none; 吗？我知道使用某些导航器（例如：Safari）不可能触发对隐藏元素的点击。
好像是个bug：developer.microsoft.com/en-us/microsoft-edge/platform/issues/….
@Ezhno 我试图摆脱 display: none 但这似乎并没有影响它。我将change 事件移到click 事件之外，这似乎解决了问题。
@Quiver 我认为将事件放在事件中是一种糟糕的语法。这可能就是 Edge 不喜欢它的原因。导航器在不工作时是否返回了一些错误？
@Ezhno 不。根本没有显示错误：/

标签： javascript microsoft-edge

【解决方案1】：

我能够解决这个问题。我将change 事件移到click 事件之外，现在似乎一切正常。不知道为什么这只是 Edge 中的一个问题。

工作：

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

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

【讨论】：

无论如何这都是正确的解决方案。因为否则你在每次点击按钮时都会安装change-listener。它们会堆积起来。
@AjAX。很高兴知道。感谢您的提示！

【解决方案2】：

将“更改”更改为“点击”，它正在工作。

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

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

【讨论】：

介意链接到一个工作示例？我尝试将其更改为单击 JSFiddle，但它似乎对我不起作用。

【解决方案3】：

这个问题是因为触发点击事件后添加了事件监听。如果您确实需要在另一个侦听器中添加事件侦听器，则需要先执行此操作，然后再触发此事件。所以试试这个：

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

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

【讨论】：