jQuery触发Bootstrap5模态框随机弹出两次致多删图片问题求助

核心故障原因 #

• 每次点击.a_trash垃圾桶图标时，都会给#del确认按钮新增一次click事件监听，事件不会自动销毁，点击n次垃圾桶后，#del就绑定了n个删除回调，点击一次确认就会执行n次删除逻辑，这就是偶发删除多张、重复触发模态框、页面锁定的直接原因
• 原代码中$(this).closest()没有传入目标选择器，无法正确定位到要删除的缩略图容器节点
• 原代码调用modal('toggle')控制模态框关闭，状态不稳定容易出现模态框重叠锁定的问题

修复后的jQuery代码 #

$(document).ready(function(){
  // 全局变量存储当前待删除的资源信息
  let currentDelId = '';
  let currentDelEl = null;

  // 垃圾桶点击事件：打开模态框，记录待删除信息
  $(document).on('click','.a_trash', function(e){
    e.preventDefault();
    currentDelId = $(this).attr('rel');
    // 明确指定要删除的缩略图容器选择器，准确定位节点
    currentDelEl = $(this).closest('.col-thumbnail');
    $('#mdl-avviso').modal('show');
  });

  // 确认删除按钮点击事件：全局仅绑定一次，避免重复绑定
  $(document).on('click', '#del', function(e){
    if (!currentDelId || !currentDelEl) return;
    $.ajax({
      type: "POST",
      data: 'id=' + currentDelId,
      url: "php/del-img.php"
    }).done(function() {
      // 用hide方法明确关闭模态框，避免状态混乱
      $('#mdl-avviso').modal('hide');
      currentDelEl.fadeOut(300,function() {
        currentDelEl.remove();
        // 清空待删除信息，避免误操作
        currentDelId = '';
        currentDelEl = null;
      });
    });
  });
});

可选优化建议 #

可以将HTML中记录图片ID的rel属性替换为符合HTML5规范的data-id属性，PHP生成代码对应修改为：

$this->html .= "<a href='#' class='a_trash' data-id='" . $this->row['id'] . "'>" . "<i class='fa fa-trash fa-2x position' aria-hidden='true'></i></a>";

jQuery取值对应改为currentDelId = $(this).data('id');，可读性和兼容性更好。

内容的提问来源于stack exchange，提问作者P.Davide