如何实现Ajax请求成功时无需二次点击直接修改按钮文本与状态

你当前写在success回调里的逻辑，只是在Ajax请求成功时给按钮额外绑定了一个click事件，并没有直接执行按钮修改操作，所以必须等用户再次点击按钮，才会触发禁用、改文本的逻辑。

删掉嵌套的click事件绑定，直接在success回调里选中目标按钮，执行对应的修改操作即可，Ajax请求成功后会立刻自动运行这些逻辑，不需要用户额外点击。
修正后的完整success回调代码：

success: function () {
    Swal.fire({
      title: "Message recieved!",
      text: "We will get back to you soon.",
      icon: "success",
    }); 
    // 直接获取按钮元素执行修改
    const $contactBtn = $("#contactFormButton");
    // 禁用按钮
    $contactBtn.prop("disabled", true);
    // 替换按钮内容为提交成功状态+对应图标
    $contactBtn.html(
      'Submitted! <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check-fill" viewBox="0 0 16 16"><path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.026A2 2 0 0 0 2 14h6.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586l-1.239-.757ZM16 4.697v4.974A4.491 4.491 0 0 0 12.5 8a4.49 4.49 0 0 0-1.965.45l-.338-.207L16 4.697Z"/><path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/></svg>'
    );
}

• 可以给禁用状态的按钮添加CSS样式，比如设置opacity: 0.7、cursor: not-allowed，交互提示更清晰
• 如果后续需要支持表单重置后再次提交，记得在表单重置逻辑里把按钮的disabled属性移除，同时把按钮文本恢复为初始的"Submit"

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