调用e.preventDefault()后如何重新触发按钮的click点击事件？

问题根因 #

• 解绑方法传参错误：unbind()不支持传入事件对象e作为入参，只有传入事件类型字符串（比如"click"）或绑定的事件处理函数引用才能完成解绑，原代码的解绑逻辑完全没有生效，重新触发点击时还是会进入拦截逻辑，所以看起来操作没有反应。
• 方法废弃问题：unbind()是jQuery已废弃的API，1.7及以上版本更推荐使用off()方法执行解绑操作，兼容性更强。

修复后代码 #

$("#update2FAButton").on("click",function(e){
  e.preventDefault()
  var providedPassword = prompt("Enter password");
  var password = $("#password").val();
  if (providedPassword!==password){
    alert("Wrong password, try again.");
    return;
  }
  // 解绑当前绑定的点击拦截逻辑
  $(this).off("click");
  // 调用原生DOM点击方法，触发按钮默认行为
  this.click();
})

优化建议 #

• 原代码prompt的提示文字存在拼写错误，passowrd应修正为password
• 如果按钮还绑定了其他点击事件需要保留，可以给当前拦截逻辑添加事件命名空间，解绑时只清除对应命名空间的事件，避免误删其他绑定逻辑：

// 绑定时添加passwordCheck命名空间
$("#update2FAButton").on("click.passwordCheck", function(e){
  e.preventDefault()
  const providedPassword = prompt("Enter password");
  const password = $("#password").val();
  if (providedPassword !== password){
    alert("Wrong password, try again.");
    return;
  }
  // 仅解绑passwordCheck命名空间下的click事件
  $(this).off("click.passwordCheck");
  this.click();
})

• 可以增加空值判断，避免用户点击prompt的取消按钮后出现逻辑异常。

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