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

Question

I am making a change password module where on click of edit-password button a modal shows-up where Old/current password form gets appended to modal-body where a user has to insert his current password on correct password entered, the new-password form gets appended to modal-body. On click of new password submit button its 1st job is to checks if the length of the password is less than 7 characters, if its true a span with a message gets appended to the submit-button id of new password form. But it's not appending span element to an already appended element ie the new password form.

I am new to jquery/Laravel, don't know why this is not working.

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

In your code you were appending your error message to input-box that's not possible. You can append span to some div ie: <div class='newPasswordSubmit'></div> here using $(".newPasswordSubmit").html.. will append your error message below your input box.

Demo Code (I have remove ajax code and some other code ):

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