jQuery点击忘记密码按钮添加弹窗后立即消失问题求助

嘿，这个问题我太熟了！你的弹窗之所以刚显示就消失，核心原因是按钮触发了表单的默认提交行为——因为你的“Forgot password?”按钮是放在<form>标签内部的，而HTML里按钮默认的type属性是submit，点击它会自动提交表单，导致页面刷新，刚创建的弹窗自然就跟着没了。

下面给你两种简单的修复方案，任选其一就行：

方案一：给按钮指定type="button" #

直接在创建按钮的时候设置type属性为button，这样它就不会触发表单提交了：

let passwordRequest = $('<button>');
passwordRequest.text('Forgot password?');
passwordRequest.attr('id', 'passwordRequest');
// 新增这一行，指定按钮类型为普通按钮
passwordRequest.attr('type', 'button');
passwordRequest.appendTo(form);

方案二：在点击事件中阻止默认行为 #

如果不想改按钮类型，也可以在点击事件处理函数里阻止浏览器的默认行为：

$(passwordRequest).on('click', function(event) {
  // 阻止表单提交的默认行为
  event.preventDefault();
  requestForgottenPassword();
});

完整修正后的代码示例 #

这里把所有代码整合好，你可以直接用：

HTML

<div id="logIn">
  <h1>Login</h1>
  <form>
    <h2>Username</h2>
    <input id="username" type="text">
    <h2>Password</h2>
    <input id="userPassword" type="password">
    <input id="submitButton" type="submit" value="Login">
  </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

CSS

#logIn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 2px 5px 40px rgb(201, 201, 201);
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
h2 {
  font-size: 20px;
  font-weight: 300;
  margin-top: 10px;
}
input[type=text], input[type=password] {
  padding: 10px;
  width: 300px;
  margin: 10px;
  border-radius: 3px;
  border: 1px solid rgb(221, 221, 221);
  font-size: 14px;
  transition: 200ms;
}
input[type=submit] {
  padding: 5px 15px;
  margin-top: 30px;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid rgb(114, 114, 114);
  transition: 100ms;
}
#passwordRequest {
  font-size: 14px;
  text-decoration: none;
  color: rgb(62, 184, 255);
  margin-top: 20px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  transition: 100ms;
  padding: 5px;
}
#passwordPopup {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: aqua;
}

JavaScript

let form = $('form');
let passwordRequest = $('<button>');
passwordRequest.text('Forgot password?');
passwordRequest.attr('id', 'passwordRequest');
passwordRequest.attr('type', 'button'); // 方案一的修改
passwordRequest.appendTo(form);

function requestForgottenPassword() {
  let popup = $('<div />').appendTo(form);
  popup.attr('id', 'passwordPopup');
};

// 如果用方案二，就把下面的代码改成带event.preventDefault()的版本
$(passwordRequest).on('click', function() {
  requestForgottenPassword();
});

这样修改后，点击“Forgot password?”按钮就只会创建弹窗，不会触发表单提交，弹窗也就不会消失啦！

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