JavaScript代码执行多次

我已经创建了一个简单的网页，做基本的图像处理。我使用php上传图像，如果图像的宽度或高度分别超过600px或400px（通过ajax调用），则使用Python（cgi脚本）调整图像大小

以下是场景：

用户选择图像

用户点击上传按钮

这将对

upload.php

进行ajax调用，将文件上载到服务器

成功后，如果图像大于最大宽度和高度，则对

resize.py

（cgi脚本）进行另一个ajax调用以调整图像大小

成功后，调整大小的图像将绘制到画布上

用户点击

Run

按钮。（图像变为灰度）

用户点击重置按钮。（原始图像被绘制到画布上）

在这之前一切都很好

现在，如果用户选择另一个图像，上传它并点击

Run

按钮，则由该

Run

按钮事件触发的功能将执行两次。如果按下重置按钮，则此事件触发的功能将执行3次

如果上传了第三张图像，则当按下

运行

按钮时，

运行

按钮事件将执行3次，如果按下

重置

按钮，该功能将执行6次。如果上传了另一个图像，它会继续添加

我还有另外两种图像效果，它们也有同样的问题。我想不出如何解决这个问题。有人知道为什么会这样吗？我如何解决这个问题

请参阅正在运行的代码（最后一张幻灯片）： JavaScript:

$（'grayscaleButtonUpload'）。单击（函数（）{
var input=document.getElementById（'imageLoader'）；
imageName=input.value；
var file=input.files[0]；
如果（文件！=未定义）{
formData=新的formData（）；
if（！！file.type.match（/image.*/）{
formData.append（“图像”，文件）；
//进行ajax调用以上载图像
$.ajax({
url:“upload.php”，
类型：“POST”，
数据：formData，
processData:false，
contentType:false，
成功：功能（数据）{
var input=document.getElementById（'imageLoader'）；
imageName=input.value；
var file=input.files[0]；
formData=新的formData（）；
formData.append（“filename”，file.name）；
//进行ajax调用以调整图像大小
$.ajax({
url:“http://###########/Main/cgi-bin/resize.py”，
类型：“POST”，
数据：formData，
processData:false，
contentType:false，
成功：功能（数据）{
控制台日志（数据）；
var grayscaleCanvas=document.getElementById（“imageCanvas”）；
var grayscaleCtx=grayscaleCanvas.getContext（“2d”）；
var grayscaleImage=新图像（）；
grayscaleImage.src=“http://JS/upload/”+file.name；
$（灰度图像）.load（函数（）{
如果（！grayscaleCanvas.toDataURL（）==document.getElementById（'imageCanvas'）.toDataURL（））{
grayscaleCtx.clearRect（0，0，grayscalecavas.width，grayscalecavas.height）；
$（'#imageCanvas'）.css（{“border”：“none”，“border color”：“none”}）；
};
grayscaleCanvas.width=灰度图像.width；
灰度canvas.height=灰度图像.height；
grayscaleCtx.drawImage（灰度图像，0,0）；
$（'#imageCanvas'）.css（{“border”：“ridge”，“border color”：“green”}）；
//运行按钮事件
$（“#灰度按钮运行”）。单击（函数（）{
console.log（'运行按钮按下'）
var grayscaleImageData=grayscaleCtx.getImageData（0,0，grayscalecavas.width，grayscalecavas.height）；
var grayscalepixels=grayscaleImageData.data；
var grayscaleNumPixels=grayscaleImageData.width*grayscaleImageData.height；
对于（var i=0；i

事件处理程序正在向按钮添加新的

单击
处理程序，而不删除按钮中的处理程序

理想情况下，您应该只添加每个处理程序一次：静态元素的页面加载，动态创建的元素的DOM插入

或者，一种常见的解决方法是在添加新的元素之前，使用
.off
（与
.on
相反）从元素中删除特定类型的所有处理程序。
好吧，您正在反复向同一个按钮添加新的
单击
处理程序，但从未删除旧的处理程序。你知道，它们是堆叠的。我如何解决这个问题？正确的方法是将每个处理程序连接一次
http://#########/Main/JS/javascript.html

$('#grayscaleButtonUpload').click(function() {

  var input = document.getElementById('imageLoader');
  imageName = input.value;
  var file = input.files[0];

  if(file != undefined) {
    formData= new FormData();
    if(!!file.type.match(/image.*/)) {
      formData.append("image", file);

      // Make the ajax call to upload the image
      $.ajax({
        url: "upload.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
          var input = document.getElementById('imageLoader');
          imageName = input.value;
          var file = input.files[0];
          formData = new FormData();
          formData.append("filename", file.name);

          // Make the ajax call to resize the image
          $.ajax({
            url: "http://##########/Main/cgi-bin/resize.py",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
              console.log(data);
              var grayscaleCanvas = document.getElementById("imageCanvas");
              var grayscaleCtx = grayscaleCanvas.getContext("2d");
              var grayscaleImage = new Image();

              grayscaleImage.src = "http://###########/Main/JS/upload/" + file.name;
              $(grayscaleImage).load(function() {

                if (!grayscaleCanvas.toDataURL() == document.getElementById('imageCanvas').toDataURL()) {
                    grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                    $('#imageCanvas').css({"border":"none", "border-color": "none"});
                };

                grayscaleCanvas.width = grayscaleImage.width;
                grayscaleCanvas.height = grayscaleImage.height;
                grayscaleCtx.drawImage(grayscaleImage, 0, 0);
                $('#imageCanvas').css({"border":"ridge", "border-color": "green"});

                // Run button event
                $("#grayscaleButtonRun").click(function() {
                  console.log('Run button pressed')
                  var grayscaleImageData = grayscaleCtx.getImageData(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                  var grayscalepixels = grayscaleImageData.data;
                  var grayscaleNumPixels = grayscaleImageData.width * grayscaleImageData.height;

                  for (var i = 0; i < grayscaleNumPixels; i++) {
                    var avg = (grayscalepixels[i * 4] + grayscalepixels[i * 4 + 1] + grayscalepixels[i * 4 + 2]) / 3;
                    grayscalepixels[i * 4] = avg;
                    grayscalepixels[i * 4 + 1] = avg;
                    grayscalepixels[i * 4 + 2] = avg;
                  };

                  grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                  grayscaleCtx.putImageData(grayscaleImageData, 0, 0);

                  // Reset button event
                  $('#grayscaleButtonReset').click(function() {
                    console.log('Reset button pressed')
                    grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                    grayscaleCanvas.width = grayscaleImage.width;
                    grayscaleCanvas.width = grayscaleImage.width;
                    grayscaleCtx.drawImage(grayscaleImage, 0, 0);
                  });
                });
              });
            }
          });
        }
      });
    } else {
      alert('Selected file is not an image!');
    }
  } else {
  alert('No File Selected!');  
  }
});