如何在jQuery中让多个按钮仅触发一次事件？

嘿，我明白你的问题啦——现在你用$('.btnSupp').one("click", ...)给每个按钮都单独绑定了单次点击事件，所以每个按钮都能触发一次，导致总共有多次触发。要实现不管点击哪个按钮，整个事件只执行一次，之后所有按钮都无响应，咱们可以用这几种方法：

方法1：利用事件委托 + .one() #

把事件绑定到按钮的父元素上，这样整个委托事件只会触发一次，不管点哪个子按钮：

// 假设按钮的父元素是某个容器，不确定的话也可以用document
$('.btnSupp').parent().one('click', '.btnSupp', function() {
  // 纠正你原代码里的小错误：is("btn-danger")应该是类选择器，要加.或者用hasClass
  if ($(this).hasClass("btn-danger")) {
    // 这里写你原来的逻辑
  } else {
    var r = $('<a href="#">Enregistrer</a>');
    $("body").append(r);
  }
  
  // 可选：触发后禁用所有按钮，视觉上更明确
  $('.btnSupp').prop('disabled', true);
});

这种方法的好处是，如果之后还有动态生成的.btnSupp按钮，也会受这个委托事件约束，同样只会触发一次。

方法2：用全局标记控制执行次数 #

定义一个变量记录事件是否已经执行过，每次点击按钮时先检查这个标记：

var eventExecuted = false;

$('.btnSupp').on('click', function() {
  // 如果已经执行过，直接返回
  if (eventExecuted) return;
  
  // 标记为已执行
  eventExecuted = true;
  
  // 你的业务逻辑
  if ($(this).hasClass("btn-danger")) {
    // ...
  } else {
    var r = $('<a href="#">Enregistrer</a>');
    $("body").append(r);
  }
  
  // 移除所有按钮的点击事件，禁用按钮
  $('.btnSupp').off('click').prop('disabled', true);
});

方法3：绑定事件后执行一次就移除所有监听 #

先定义一个单独的事件处理函数，执行后就移除所有按钮的该事件监听：

function handleButtonClick() {
  // 业务逻辑
  if ($(this).hasClass("btn-danger")) {
    // ...
  } else {
    var r = $('<a href="#">Enregistrer</a>');
    $("body").append(r);
  }
  
  // 移除所有按钮的这个点击事件
  $('.btnSupp').off('click', handleButtonClick);
  // 禁用按钮
  $('.btnSupp').prop('disabled', true);
}

// 给所有按钮绑定点击事件
$('.btnSupp').on('click', handleButtonClick);

重要提醒 #

你原代码里的$('.btnSupp').is("btn-danger")是错误的：is()方法需要传入合法的CSS选择器，类选择器要加.，或者直接用hasClass("btn-danger")更直观哦。

内容的提问来源于stack exchange，提问作者Loïc Rivera