jQuery点击按钮后如何阻止其他按钮click事件执行避免变量被覆盖

你提到的兼容所有用户操作场景的思路是正确的，前端开发确实需要考虑这类边界场景，避免数据异常。实现你要求的功能有两种常用方案，你可以根据实际需求选择：

方案1：新增状态标记变量控制逻辑执行 #

新增一个布尔变量记录按钮是否已经被点击过，只有未点击过的时候才执行机构信息赋值逻辑，代码修改量最小：

$(document).ready(function() {
  let yourOrganisation;
  // 新增状态标记，初始为未选择机构
  let isOrgSelected = false;

  $('.donate_btn').click(function() {
    $('.donate_button_wrapper').hide();
    $('.donate_finish_wrapper').show();
    $(window).scrollTop(0);
  });

  $(".donate_button_1").click(function() {
    // 仅未选择过机构时执行赋值
    if (!isOrgSelected) {
      yourOrganisation = "Organisation 1"
      console.log(yourOrganisation);
      // 标记为已选择，后续点击不生效
      isOrgSelected = true;
    }
  });

  $(".donate_button_2").click(function() {
    if (!isOrgSelected) {
      yourOrganisation = "Organisation 2"
      console.log(yourOrganisation);
      isOrgSelected = true;
    }
  });
});

方案2：点击后直接解绑按钮点击事件 #

如果想要彻底杜绝后续点击的触发可能性，可以在第一次点击按钮后直接解绑所有捐赠按钮的点击事件，从事件层面阻止后续逻辑执行：

$(document).ready(function() {
  let yourOrganisation;

  $('.donate_btn').click(function() {
    $('.donate_button_wrapper').hide();
    $('.donate_finish_wrapper').show();
    $(window).scrollTop(0);
    // 解绑所有捐赠按钮的点击事件，后续点击不会触发任何逻辑
    $('.donate_btn').off('click');
  });

  $(".donate_button_1").click(function() {
    yourOrganisation = "Organisation 1"
    console.log(yourOrganisation);
  });

  $(".donate_button_2").click(function() {
    yourOrganisation = "Organisation 2"
    console.log(yourOrganisation);
  });
});

代码优化建议 #

你还可以把机构名称存在按钮的data-*自定义属性中，合并重复的点击事件，精简代码的同时降低维护成本：
修改后的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="donate_button_wrapper">
  <button class="donate_btn" data-org="Organisation 1">
    Button 1
  </button>
  <button class="donate_btn" data-org="Organisation 2">
    Button 2
  </button>
</div>

<div class="donate_finish_wrapper">
  Some content
</div>

修改后的JS代码：

$(document).ready(function() {
  let yourOrganisation;
  let isOrgSelected = false;

  $('.donate_btn').click(function() {
    if (!isOrgSelected) {
      // 直接从按钮的自定义属性读取机构信息
      yourOrganisation = $(this).data('org');
      console.log(yourOrganisation);
      isOrgSelected = true;
    }
    $('.donate_button_wrapper').hide();
    $('.donate_finish_wrapper').show();
    $(window).scrollTop(0);
  });
});

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