AJAX请求后修改按钮ID仍无法阻止jQuery点击事件触发的问题

你忽略了一个关键：jQuery的事件是绑定在DOM元素本身，而不是绑定在选择器字符串上。

当你执行$("#btn1").on("click", function(){...})时，jQuery会立刻找到当前页面中ID为btn1的DOM元素，然后把点击事件直接绑定到这个元素对象上。后续你修改元素的ID为btn0，只是改变了元素的id属性，但这个元素本身还是原来那个被绑定了事件的对象，所以点击它依然会触发之前绑定的事件。

几种解决方法 #

• 方法1：用.one()绑定事件（推荐）
  jQuery提供了.one()方法，它会让事件只触发一次，触发后自动解绑，不用手动处理：

  $("#btn1").one("click", function() {
    $.ajax({
      url: '#',
      type: 'POST',
      error: function(data) {
        console.log("After ajax call");
      }
    });
  });
  

• 方法2：触发后手动解绑事件
  在AJAX回调里，用.off()移除当前元素的点击事件：

  $("#btn1").on("click", function() {
    const $this = $(this); // 保存当前按钮的引用
    $.ajax({
      url: '#',
      type: 'POST',
      error: function(data) {
        console.log("After ajax call");
        $this.off("click"); // 解绑点击事件
        $this.attr("id", "btn0"); // 可同时修改ID
      }
    });
  });
  

• 方法3：禁用按钮（更友好）
  直接把按钮设为禁用状态，用户能直观看到按钮不可点击，同时阻止事件触发：

  $("#btn1").on("click", function() {
    const $this = $(this);
    $this.prop("disabled", true); // 禁用按钮
    $.ajax({
      url: '#',
      type: 'POST',
      error: function(data) {
        console.log("After ajax call");
      }
    });
  });
  

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