附加元素內的附加元素在 jQuery 中不起作用

Question

我正在制作一個更改密碼模塊，在單擊編輯密碼按鈕時會顯示一個模式，其中舊/當前密碼表單被附加到模式正文中，用戶必須在輸入正確密碼時插入他的當前密碼，新密碼表單被附加到模態體。 單擊新密碼提交按鈕時，它的第一項工作是檢查密碼的長度是否小於 7 個字符，如果它是真的一個帶有消息的跨度被附加到新密碼表單的提交按鈕 id。 但它不會將 span 元素附加到已附加的元素，即新密碼表單。

我是 jquery/Laravel 的新手，不知道為什么這不起作用。

 $(document).ready(function(){ function show_old_password_modal(){ $("#editModal").show(); $("#modalBody, .modal-title").html(""); $(".modal-title").append("Enter Old Password"); $("#modalBody").append("<form method='POST'>"+ "<div class='form-inline'>"+ "<label for='oldPassword'>Old Password: </label> &nbsp;&nbsp;"+ "<input type='password' id='oldPassword' class='form-control col-lg-6'>"+ "</div> "+ "<br>"+ "<span class='badge badge-danger' id='spanDanger' ></span>"+ "<br>"+ "<input type='submit' id='oldPasswordSubmit' class='btn btn-success update-btn' value='Submit'> "+ "</form>"); } $("#edit-password").click(function(){ show_old_password_modal(); }); $(document).on("click","#oldPasswordSubmit", function(e){ e.preventDefault(); var userId = "{{ Auth::user()->id }}"; console.log(userId); var oldPassword = $("#oldPassword").val(); console.log(oldPassword); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: "{{ route('check.old.password') }}", message: "GET", data: { userId: userId, oldPassword: oldPassword }, success: function(data){ console.log(data.result); if(data.result == 1){ $("#modalBody, .modal-title").html(""); $(".modal-title").append("Enter New Password"); $("#modalBody").append("<form method='POST'>"+ "<div class='form-inline'>"+ "<label for='newPassword'>New Password: </label> &nbsp;&nbsp;"+ "<input type='password' id='newPassword' class='form-control col-lg-6'>"+ "</div> "+ "<br>"+ "<input type='submit' id='newPasswordSubmit' class='btn btn-success update-btn' value='Submit'> "+ "</form>"); } else{ show_old_password_modal(); $("#spanDanger").text("Invalid Old Password"); } }, error: function(error){ console.log(error.responseText); } }); }); $(document).on("click","#newPasswordSubmit",function(e){ e.preventDefault(); var userId = "{{ Auth::id() }}" console.log("userId: "+userId); var newPassword = $("#newPassword").val(); console.log("newPass: "+newPassword); if(newPassword.length < 7){ //$("#spanA").html("Password length should be greater than 6"); $("#newPasswordSubmit").append("<span class='badge badge-danger'>Password length should be greater than 6</span>"); return; } $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: "{{ url('/editProfile/password?_method=PUT') }}", method: "POST", data: { userId: userId, newPassword: newPassword }, success: function(data){ console.log(data); $("#editModal").hide(); message(data.message, data.status); }, error: function(error){ console.log(error.responseText); } }); }); $("#closeModal").click(function(){ $("#editModal").hide(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container-fluid"> <div class="modal" id="editModal"> <div class="modal-dialog"> <div class="modal-content"> <;-- Modal Header --> <div class="modal-header"> <h4 class="modal-title"></h4> <button type="button" class="close" id="closeModal" data-dismiss="modal">&times:</button> </div> <:-- Modal body --> <div class="modal-body" id="modalBody"> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <h1 class="col-lg-6 text-center">Profile</h1> </div> <div class="row"> <div class="card col-lg-6"> <div class="card-body"> <div class="name"> <label for="name">Name: </label> <b id="showName"></b> <a type="button" id="edit-name" class="btn btn-primary btn-sm float-right">Edit</a> </div> <hr> <div class="email"> <label for="email">Email: </label> <b id="showEmail"></b> <a type="button" id="edit-email" class="btn btn-primary btn-sm float-right">Edit</a> </div> <hr> <div class="password"> <label for="passsword">Password: </label> <b>*********</b> <a type="button" id="edit-password" class="btn btn-primary btn-sm float-right">Edit</a> </div> </div> </div> <div class="card offset-lg-2 col-lg-4 h-25" id="message"> <div class="card-body" id="msgCardBody"> </div> </div> </div> </div>

Answer 1

在您的代碼中，您將錯誤消息附加到輸入框，這是不可能的。 您可以 append span到某個 div 即： <div class='newPasswordSubmit'></div>在這里使用$(".newPasswordSubmit").html..將 Z9516DFB15F51C7EE19AZD4D4B 您的輸入框下方的錯誤消息CDBE11

演示代碼（我已刪除 ajax 代碼和其他一些代碼）：

 $(document).ready(function() { function show_old_password_modal() { $("#editModal").show(); $("#modalBody, .modal-title").html(""); $(".modal-title").append("Enter Old Password"); $("#modalBody").append("<form method='POST'>" + "<div class='form-inline'>" + "<label for='oldPassword'>Old Password: </label> &nbsp;&nbsp;" + "<input type='password' id='oldPassword' class='form-control col-lg-6'>" + "</div> " + "<br>" + "<span class='badge badge-danger' id='spanDanger' ></span>" + "<br>" + "<input type='submit' id='oldPasswordSubmit' class='btn btn-success update-btn' value='Submit'> " + "</form>"); } $("#edit-password").click(function() { show_old_password_modal(); }); $(document).on("click", "#oldPasswordSubmit", function(e) { e.preventDefault(); var userId = "{{ Auth::user()->id }}"; console.log(userId); var oldPassword = $("#oldPassword").val(); console.log(oldPassword); $("#modalBody, .modal-title").html(""); $(".modal-title").append("Enter New Password"); $("#modalBody").append("<form method='POST'>" + "<div class='form-inline'>" + "<label for='newPassword'>New Password: </label> &nbsp;&nbsp;" + "<input type='password' id='newPassword' class='form-control col-lg-6'>" + "</div> " + "<br>" + "<input type='submit' id='newPasswordSubmit' class='btn btn-success update-btn' value='Submit'> <div class='newPasswordSubmit'></div>" + "</form>"); //<--adding <div></div> }); $(document).on("click", "#newPasswordSubmit", function(e) { e.preventDefault(); var userId = "{{ Auth::id() }}" console.log("userId: " + userId); var newPassword = $("#newPassword").val(); console.log("newPass: " + newPassword); if (newPassword.length < 7) { //$("#spanA").html("Password length should be greater than 6"); //change to class $(".newPasswordSubmit").html("<span class='badge badge-danger'>Password length should be greater than 6</span>"); return; }else{ $(".newPasswordSubmit").html('');//remove span if condtion false console.log("go done") } }); $("#closeModal").click(function() { $("#editModal").hide(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container-fluid"> <div class="modal" id="editModal"> <div class="modal-dialog"> <div class="modal-content"> <;-- Modal Header --> <div class="modal-header"> <h4 class="modal-title"></h4> <button type="button" class="close" id="closeModal" data-dismiss="modal">&times:</button> </div> <:-- Modal body --> <div class="modal-body" id="modalBody"> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <h1 class="col-lg-6 text-center">Profile</h1> </div> <div class="row"> <div class="card col-lg-6"> <div class="card-body"> <div class="name"> <label for="name">Name: </label> <b id="showName"></b> <a type="button" id="edit-name" class="btn btn-primary btn-sm float-right">Edit</a> </div> <hr> <div class="email"> <label for="email">Email: </label> <b id="showEmail"></b> <a type="button" id="edit-email" class="btn btn-primary btn-sm float-right">Edit</a> </div> <hr> <div class="password"> <label for="passsword">Password: </label> <b>*********</b> <a type="button" id="edit-password" class="btn btn-primary btn-sm float-right">Edit</a> </div> </div> </div> <div class="card offset-lg-2 col-lg-4 h-25" id="message"> <div class="card-body" id="msgCardBody"> </div> </div> </div> </div>

Answer 2

 $(document).ready(function(){ function show_old_password_modal(){ $("#editModal").show(); $("#modalBody, .modal-title").html(""); $(".modal-title").append("Enter Old Password"); $("#modalBody").append("<form method='POST'>"+ "<div class='form-inline'>"+ "<label for='oldPassword'>Old Password: </label> &nbsp;&nbsp;"+ "<input type='password' id='oldPassword' class='form-control col-lg-6'>"+ "</div> "+ "<br>"+ "<span class='badge badge-danger' id='spanDanger' ></span>"+ "<br>"+ "<input type='submit' id='oldPasswordSubmit' class='btn btn-success update-btn' value='Submit'> "+ "</form>"); } $("#edit-password").click(function(){ show_old_password_modal(); }); $(document).on("click","#oldPasswordSubmit", function(e){ e.preventDefault(); var userId = "{{ Auth::user()->id }}"; console.log(userId); var oldPassword = $("#oldPassword").val(); console.log(oldPassword.length); $("#oldPasswordSubmit").parent().find('.badge').remove(); if(oldPassword.length < 7){ //$("#spanA").html("Password length should be greater than 6"); $("#oldPasswordSubmit").after("<span class='badge badge-danger'>Password length should be greater than 6</span>"); return; } $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: "{{ route('check.old.password') }}", message: "GET", data: { userId: userId, oldPassword: oldPassword }, success: function(data){ console.log(data.result); if(data.result == 1){ $("#modalBody, .modal-title").html(""); $(".modal-title").append("Enter New Password"); $("#modalBody").append("<form method='POST'>"+ "<div class='form-inline'>"+ "<label for='newPassword'>New Password: </label> &nbsp;&nbsp;"+ "<input type='password' id='newPassword' class='form-control col-lg-6'>"+ "</div> "+ "<br>"+ "<input type='submit' id='newPasswordSubmit' class='btn btn-success update-btn' value='Submit'> "+ "</form>"); } else{ show_old_password_modal(); $("#spanDanger").text("Invalid Old Password"); } }, error: function(error){ console.log(error.responseText); } }); }); $(document).on("click","#newPasswordSubmit",function(e){ e.preventDefault(); var userId = "{{ Auth::id() }}" console.log("userId: "+userId); var newPassword = $("#newPassword").val(); console.log("newPass: "+newPassword.length); if(newPassword.length < 7){ //$("#spanA").html("Password length should be greater than 6"); $("#newPasswordSubmit").append("<span class='badge badge-danger'>Password length should be greater than 6</span>"); return; } $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: "{{ url('/editProfile/password?_method=PUT') }}", method: "POST", data: { userId: userId, newPassword: newPassword }, success: function(data){ console.log(data); $("#editModal").hide(); message(data.message, data.status); }, error: function(error){ console.log(error.responseText); } }); }); $("#closeModal").click(function(){ $("#editModal").hide(); }); });

 <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4;1/js/bootstrap:min:js"></script> <div class="container-fluid"> <div class="modal" id="editModal"> <div class="modal-dialog"> <div class="modal-content"> <:-- Modal Header --> <div class="modal-header"> <h4 class="modal-title"></h4> <button type="button" class="close" id="closeModal" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body" id="modalBody"> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <h1 class="col-lg-6 text-center">Profile</h1> </div> <div class="row"> <div class="card col-lg-6"> <div class="card-body"> <div class="name"> <label for="name">Name: </label> <b id="showName"></b> <a type="button" id="edit-name" class="btn btn-primary btn-sm float-right">Edit</a> </div> <hr> <div class="email"> <label for="email">Email: </label> <b id="showEmail"></b> <a type="button" id="edit-email" class="btn btn-primary btn-sm float-right">Edit</a> </div> <hr> <div class="password"> <label for="passsword">Password: </label> <b>*********</b> <a type="button" id="edit-password" class="btn btn-primary btn-sm float-right">Edit</a> </div> </div> </div> <div class="card offset-lg-2 col-lg-4 h-25" id="message"> <div class="card-body" id="msgCardBody"> </div> </div> </div> </div>