在单击 jquery 时将 div 附加到正文

Question

为了向登录添加一个小弹出窗口，我正在使用jQuery在用户单击按钮后将div及其内容附加到页面。我不知道为什么，但是每次我单击按钮时，div都会正常出现，但会立即再次消失。请帮忙。

问题完全与Forgot Password按钮有关。

这是代码：

let form = $('form');
let passwordRequest = $('<button>');
passwordRequest.text('Forgot password?');
passwordRequest.attr('id', 'passwordRequest');
passwordRequest.appendTo(form);
function requestForgottenPassword() {
let popup = $('<div />').appendTo(form);
popup.attr('id', 'passwordPopup');
};
$(passwordRequest).on('click', function() {
requestForgottenPassword();
});

#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
#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;
}

<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>

https://codepen.io/colintessarzick/pen/GRoMEWm

Answer 1

<button>默认为type="submit"(即使没有type(-
您遇到的问题是实际提交的表单。

使用type="button"或与 jQuery 脚本一起使用：

const passwordRequest = $("<button>", {
text: "Forgot password?",
id: "passwordRequest",
type: "button",
appendTo: form
});

例：

let form = $('form');
const passwordRequest = $("<button>", {
text: "Forgot password?",
id: "passwordRequest",
type: "button",
appendTo: form
});
function requestForgottenPassword() {
let popup = $('<div />').appendTo(form);
popup.attr('id', 'passwordPopup');
};
$(passwordRequest).on('click', function() {
requestForgottenPassword();
});

#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
#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;
}

<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>