Я создаю страницу профиля для пользователей моего приложения и хочу, чтобы пользователь изменил свою личную информацию.Моя идея заключается в том, что при загрузке страницы его личная информация отображается в строках внутри тега <p>.И затем, когда он решает отредактировать свою информацию, тег <p> заменяется текстовым полем, а его значением является текст из тега <p>.
Теперь проблема в том, что когда я пытаюсь что-то сделать с текстовыми полями, JQuery, кажется, не выбирает их, даже если я уже назначил идентификатор для текстовых полей. Примечание в консоли не отображаются ошибки
Я пытался получить идентификатор текстового поля, когда щелкаю по нему, используя эту функцию.
$(window).click(function(e) {
alert(e.target.id);
});
идентификатор получает предупреждение, но все же,JQuery не хочет выделять текстовые поля.
вот мой код.
html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Epicurean Inc.</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">
<link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
<link rel="stylesheet" href="assets/css/Navigation-with-Button.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body id="profile">
<nav class="navbar navbar-light navbar-expand-md navigation-clean-button" data-aos="zoom-in-up" data-aos-duration="1000" id="profile-navbar">
<div class="container"><a class="navbar-brand pulse animated" href="index.php" id="homelink">Epicurean</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mr-auto"></ul><span class="navbar-text actions"> <a class="btn btn-light action-button" role="button" href="logout.php" data-bs-hover-animate="pulse" id="logoutbtn">Log Out</a></span></div>
</div>
</nav>
<h1 data-aos="zoom-in-up" data-aos-duration="1000" id="profile-banner">Your Profile</h1>
<div class="container" data-aos="zoom-in-up" data-aos-duration="1000" id="profile-container">
<div id="heading">
<h1 class="d-inline-block float-left icon ion-person" id="about"> About Me</h1><i class="icon ion-edit d-inline-block" data-bs-hover-animate="pulse" id="edit" title="Edit"></i></div>
<form action="updateprofile.php" method="POST">
<div id="profie-content">
<div class="profile-fields">
<p class="d-inline-block title">First name: </p>
<p id="er1"></p>
<p class="d-inline-block totext" id="item1">Paragraph</p><!--this is the p tag that gets replaced to textbox-->
</div>
<div class="profile-fields">
<p class="d-inline-block title">Last name: </p>
<p id="er2"></p>
<p class="d-inline-block totext" id="item2">Paragraph</p><!--this is the p tag that gets replaced to textbox-->
</div>
<div class="profile-fields">
<p class="d-inline-block title">Middle name: </p>
<p id="er3"></p>
<p class="d-inline-block totext" id="item3">Paragraph</p><!--this is the p tag that gets replaced to textbox-->
</div>
<div class="profile-fields">
<p class="d-inline-block title">Date of birth: </p>
<p id="er4"></p>
<p class="d-inline-block totext" id="item4">Paragraph</p><!--this is the p tag that gets replaced to textbox-->
</div>
<div class="profile-fields">
<p class="d-inline-block title">Email address: </p>
<p id="er5"></p>
<p class="d-inline-block totext" id="item5">Paragraph</p><!--this is the p tag that gets replaced to textbox-->
</div>
<div class="profile-fields">
<p class="d-inline-block title">Password: </p>
<p id="er6"></p>
<p class="d-inline-block totext" id="item6">Paragraph</p><!--this is the p tag that gets replaced to textbox-->
</div>
<div class="profile-fields">
<p class="d-inline-block title">Contact number: </p>
<p id="er7"></p>
<p class="d-inline-block totext" id="item7">Paragraph</p><!--this is the p tag that gets replaced to textbox-->
</div>
<div class="profile-fields">
<p class="d-inline-block title">Application status: </p>
<p class="d-inline-block" id="appstat">Paragraph</p>
</div>
<div id="link">
<a class="float-right links" href="#" id="resume">View resume</a>
<a class="d-block float-right links" href="#" id="assessment">View assesment</a>
</div>
<button class="btn btn-light action-button" type="submit" data-bs-hover-animate="pulse"
id="savebtn">Save changes</button>
<button class="btn btn-light action-button" type="button" data-bs-hover-animate="pulse" id="cancelbtn">Cancel</button>
</div>
</form>
</div>
<div class="footer-basic">
<footer>
<div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Home</a></li>
<li class="list-inline-item"><a href="#">Services</a></li>
<li class="list-inline-item"><a href="#">About</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
</ul>
<p class="copyright">Epicurean Partners Exchange Inc. © 2017</p>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
<script src="assets/js/profile.js"></script><!--my jquery file is imported-->
</body>
</html>
jquery
$(document).ready(function() {
$("#edit").click(function() { //turns the fields into text boxes when edit button is clicked
for (var i = 1; i < 8 ; i++) {//for loop for replacing <p> tags with textboxes
if (i == 4) {
$("#item"+i).replaceWith("<input type='date' id='"+i+"' class='txtbox' min='1940-12-31' max='2003-12-31'>"); //value='"+ $("#item"+i).text() +"'>");
} else if (i == 6) {
$("#item"+i).replaceWith("<input type='password' id='"+i+"' class='txtbox' value='"+ $("#item"+i).text() +"'>");
} else {
$("#item"+i).replaceWith("<input type='text' id='"+i+"' class='txtbox' value='"+ $("#item"+i).text() +"'>");
}
}
$("#savebtn").slideDown().removeAttr("hidden");
$("#cancelbtn").slideDown().removeAttr("hidden");
});
$("#cancelbtn").click(function() { //reloads the page if user cancels
location.reload();
});
$("#1").click(function() {//not working
alert("textbox is clicked");
});
});