append div 到 body 点击 jquery

Question

for adding a little popup to a login i´m using jquery to append a div and its content to the page after the user clicks on the button. I don´t know why, but everytime i click the button, the div appears normally but disappears again immediately. Please help.

The Problem is all about the Forgot Password button.

Here is the code:

 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> is by default type="submit" (even without the type ) -
The issue you're experiencing is the form actually being submitted.

Use type="button" , or with your jQuery script:

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

Example:

 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>