设置通过JavaScript输入的文件的值会引发看似无关的事件

Question

我的实际代码很长（86行）； 因此，我将只编写代码结构，以避免使这篇文章过长：

$('#myFile').on('change', function(){
 if(test == "passed"){
 //blah blah blah, blah blah blah
    $('#modalButton').on('click', function(){
         //blah blah blah, blah blah blah
         $.ajax({
         url: "process.php",
         type: "POST",
         //blah blah blah, blah blah blah
         });
    });
 } else {
    document.getElementById("myFile").value = null;
 }
});

我的页面上有一个名为myFile的文件输入元素。

当用户选择文件时，将触发change事件，并且应该运行最外面的块。 然后，我将通过检查文件的大小和类型来测试用户的文件（照片），如果通过了测试，我将显示一个模式，该模式允许用户使用croppie.js插件裁剪所选的照片。 裁剪按钮称为modalButton。 按下后，我将使用ajax将用户裁剪的照片发送到我的服务器，以将其上传到我的服务器上。

事实是，当用户选择未通过测试的照片，然后在下次选择另一张通过测试的照片时，上传的照片将上传一次以上，这意味着可能多次触发了ajax事件。 我看不到为什么会这样，因为ajax应该在单击modalButton之后而不是在更改输入文件元素之后运行。 我想念什么吗？

如有必要，我将非常乐意与您共享我的代码（JS和HTML）。 但是我不知道如何将它们粘贴在这里，而又不致使这篇文章看起来太长了！

Answer 1

发生这种情况是因为您正在change事件中创建click事件。 以前创建的点击事件不会通过创建新事件来删除。 这就是为什么应该避免在其他事件处理程序中创建事件处理程序的原因。 您可以先off('click')然后再创建新的Click，以查看是否可以解决该问题，但理想情况下，首先不要在其他绑定中包含该绑定。

//example
$('#modalButton').off('click').on('click', function(){ ... });