Javascript 更改事件不是'；在边缘中触发单击文件输入时激发

我在Edge中上载文件时遇到问题。我目前的做法在Chrome和Firefox中都适用，但在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>

上传
$（“#上载按钮”）。在（“单击”上，函数（）{
$（“#testUploader”）.trigger（“单击”）；
$（“#testUploader”）。在（“change”，function（）上{
控制台日志（“更改”）；
});
});

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

下面是一个正在工作的JSFIDLE，它显示了问题：

---

我能够解决这个问题。我将

change

事件移动到

click

事件之外，现在一切似乎都正常了。不知道为什么这只是Edge的一个问题

工作：

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

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

$（“#上载按钮”）。在（“单击”上，函数（）{
$（“#testUploader”）.trigger（“单击”）；
});
$（“#testUploader”）。在（“change”，function（）上{
控制台日志（“更改”）；
});

将“更改”更改为“单击”，并且它正在工作

$（“#上载按钮”）。在（“单击”上，函数（）{
$（“#testUploader”）.trigger（“单击”）；
$（#testUploader”）。在（“单击”，函数（）上{
警报（“变更”）；
});
});

发生此问题的原因是触发单击事件后添加了事件侦听器。如果您真的需要在另一个侦听器中添加事件侦听器，则需要先添加事件侦听器，然后触发此事件。所以试试这个：

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

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

$（“#上载按钮”）。在（“单击”上，函数（）{
$（“#testUploader”）。在（“change”，function（）上{
控制台日志（“更改”）；
});
$（“#testUploader”）.trigger（“单击”）；
});

您是否尝试过不使用

显示：无？我知道有些导航器（如Safari）不可能触发对隐藏元素的点击。这似乎是一个错误：。@Ezhno我试图摆脱
显示：无
，但这似乎对它没有影响。我将
change
事件移到了
click
事件之外，这似乎解决了这个问题。@Quiver我认为将事件放在事件中是一种错误的语法。这可能就是Edge不喜欢它的原因。导航器在不工作时是否返回了一些错误？@Ezhno-Nope。没有显示任何错误：/n无论如何，这是正确的解决方案。否则，每次单击按钮都会安装
change listener
。它们堆叠在一起。很高兴知道。谢谢你的提示！介意链接到一个工作示例吗？我尝试将其更改为单击JSFIDLE，但它似乎对我不起作用。
<script type="text/javascript">
    $("#UploadButton").on("click", function () {
        $("#testUploader").on("change", function() {
            console.log("change");
        });

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