如何防止单次点击触发两次Ajax请求？地图弹窗销毁操作异常处理

这种情况我之前做地图弹窗功能时也碰到过，大概率是这几个原因导致的，咱们一步步排查解决：

1. 重复ID的问题（最常见） #

你给删除按钮用了#delete这个ID，但地图上的每个弹窗里都有这个按钮的话，页面上就会存在多个相同ID的元素——HTML规范里ID必须是唯一的！jQuery的选择器匹配到所有带这个ID的元素时，点击一次就会触发多次事件处理函数，自然就发了两次Ajax请求。

解决办法：
把按钮的ID改成class，比如class="delete"，然后修改事件委托的选择器：

$(document).on('click', '#map .leaflet-popup-content .delete', function(e) {
  if (confirm('Are you sure?')) {
    $.ajax({
      type: 'POST',
      url: 'incidents/' + incident_id,
      dataType: 'script',
      data: {
        _method: 'delete',
        id: incident_id
      },
      success: function() {
        // successFunction的内容
      }
    });
  }
  // 可选：阻止事件冒泡，避免父元素的事件被触发
  e.stopPropagation();
});

2. 事件处理程序被重复绑定 #

如果你的代码在每次创建弹窗时都会执行一遍$(document).on(...)，那同一个事件就会被绑定多次，点击一次就会触发多次请求。

解决办法：
绑定事件前先解绑已有的同类型事件，确保只有一个处理程序生效：

// 先解绑再绑定
$(document).off('click', '#map .leaflet-popup-content #delete').on('click', '#map .leaflet-popup-content #delete', function() {
  if (confirm('Are you sure?')) {
    $.ajax({
      // ... 你的Ajax配置
    });
  }
});

3. 事件冒泡触发父元素的同类事件 #

如果弹窗的父元素也绑定了类似的点击事件，点击按钮时事件会冒泡到父元素，导致额外的请求。

解决办法：
在事件处理函数里阻止事件冒泡：

$(document).on('click', '#map .leaflet-popup-content #delete', function(e) {
  e.stopPropagation(); // 阻止事件向上冒泡
  if (confirm('Are you sure?')) {
    $.ajax({
      // ... 你的Ajax配置
    });
  }
});

优先检查第一个原因，重复ID的问题在多弹窗场景里最容易出现，改完class基本就能解决啦！

内容的提问来源于stack exchange，提问作者Aarthi