append div 到 body 點擊 jquery

Question

為了在登錄中添加一個小彈出窗口，我正在使用 jquery 到 append在用戶單擊按鈕后將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>