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

我的实际代码很长（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的文件输入元素

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

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

---

如果有必要，我会非常乐意与您分享我的代码（JS和HTML）。但我不知道如何将它们粘贴到这里，而不使这篇文章看起来很长

发生这种情况是因为您正在更改事件中创建单击事件。创建新的单击事件不会删除以前创建的单击事件。这就是为什么应该避免在其他事件处理程序中创建事件处理程序。您可以在创建新的单击之前关闭（'click'），以查看是否修复了它，但理想情况下，您首先不应该将该绑定放在另一个绑定中

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

---

@谢谢。这很有道理。如果我的问题是基本的，请原谅，但我应该推迟到哪里（“点击”）？我在jquery的网站上阅读了它的文档，但我仍然不完全理解它。此外，在不在另一个事件处理程序中创建事件处理程序的情况下编写代码的正确方法是什么？在我看来，在某些时候，在其他事件处理程序中创建事件处理程序是不可避免的。我很高兴被证明是错的。@Taplar:非常感谢你的帮助。似乎它已经修复了错误。：）关于我的另一个问题，情况是我希望我的用户使用文件输入选择他们的照片，然后出现一个模式窗口，允许他们根据自己的意愿裁剪照片。然后在他们点击“裁剪”后，裁剪的照片应该上传到我的服务器上。我使用第一个事件处理程序来实现用户何时使用文件输入选择了一个文件，使用第二个事件处理程序来了解何时单击了裁剪按钮。我能在不嵌套事件处理程序的情况下完成所有这些吗？@Taplar另外，请将您的评论作为我问题的答案，我可以选择它作为我问题的答案。