使用jQuery one()绑定两个按钮点击事件，如何让函数仅执行一次？

这个问题我之前也碰到过～核心原因是你对jQuery的one()方法理解有点偏差：它是给每一个匹配到的元素单独绑定一次性事件，所以#first点完失效，但#second的一次性事件还在，自然能再触发一次。

下面给你几个靠谱的实现方向：

方案一：用状态变量控制执行逻辑 #

最直观的方式是定义一个全局状态标记，不管点击哪个按钮，只要函数已经执行过一次，就直接跳过：

// 初始化状态：函数未执行过
let hasFunctionRun = false;

$('#first, #second').on('click', function(e) {
  if (!hasFunctionRun) {
    dosomething();
    // 标记为已执行，后续点击不再触发
    hasFunctionRun = true;
    // 【可选】如果想让按钮之后完全不响应点击，可以解绑所有事件
    $('#first, #second').off('click');
  }
});

方案二：执行后直接解绑所有按钮的事件 #

如果不需要保留状态（比如只要函数执行一次后，两个按钮都不能再触发任何点击逻辑），可以在one()的回调里直接移除所有目标按钮的点击事件：

$('#first, #second').one('click', function(e) {
  dosomething();
  // 解绑两个按钮的所有点击事件，后续点击都无效
  $('#first, #second').off('click');
});

这个方案的好处是不用额外维护状态变量，逻辑更简洁。

方案三：针对动态元素的事件委托方案（可选） #

如果你的按钮是动态生成的（比如后续通过JS添加到DOM），可以用事件委托结合状态变量：

let hasFunctionRun = false;

// 绑定到父元素（建议用更接近的父元素替代document，性能更好）
$(document).on('click', '#first, #second', function(e) {
  if (!hasFunctionRun) {
    dosomething();
    hasFunctionRun = true;
    // 解绑委托的事件
    $(document).off('click', '#first, #second');
  }
});

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