javascript - 如何删除 jQuery 中多个函数调用的多个事件

Question

我编写了上传图像的脚本，为此，我编写了一个从两个函数调用的删除函数，每当我从另一个函数调用删除函数时，它都会触发两次。

例如:

function getImgTrashEvents(){
  $('.image-demo').bind().click(function(){
    if(confirm("Do you want to delete this image?")){
      //Do something to delete image
    }
  });
}

//Showing images from database
function showPresentImages(){
  //Here I've written ajax call to get all images 
  $.ajax({ 
    url:'get-images', 
    success: function(response){
      //Do something to load UI of images and delete button <img class="image-demo">
      getImgTrashEvents();
    }
  });
}

//Uploading new images
function uploadImages(){
  //demo ajax call to upload photo 
  $.ajax({
    url:'upload-photo',
    success: function(response){ 
      //Load UI with newly uploaded images with class images-demo
      getImgTrashEvents();
    }
  });
}

在这段代码中，我编写了 3 个函数，第一个函数用于获取垃圾图像的所有事件，第二个函数用于显示数据库中的预设图像，最后一个函数用于上传新图像。

我在这里调用getImgTrashEvents();两个函数中都有这个函数。但是当我从 getImgTrashEvents(); 的两个事件中调用它时在上传图像并显示两次确认警报后，调用两次或两次以上进行单击。如果我只在 showPresentImages() 中调用这个函数函数，那么它不会对 uploadImages() 生效.

Answer 1

不确定代码是否正确发布到 OP .bind().click()？问题是代码在每次调用 getImgTrashEvents、showPresentImages 和 uploadImages 时附加一个额外的 click 事件。

相反，您可以在 getImagTrashEvents 之外定义 click 事件，并在必要时调用 .click() 来分派(dispatch)该事件而不是附加jQuery 对象的另一个事件处理程序。

$('.image-demo').click(function(){
  if(confirm("Do you want to delete this image?")){
    //Do something to delete image
  }
});

function getImgTrashEvents(){
  $('.image-demo').click()
}