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

这种情况正在发生，因为您在更改事件中创建了一个click事件。以前创建的点击事件不会通过创建新事件来删除。这就是为什么应该避免在其他事件处理程序中创建事件处理程序的原因。您可以在创建新单击之前执行off('click')以查看是否修复了它，但理想情况下，您不应该首先在另一个绑定中包含该绑定。

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

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

1 个答案: