JQuery 使用 .replaceWith() 函数将 <p> 元素替换为 <input type=text> 后未选择特定元素
JQuery not selecting specific element after using .replaceWith() function to replace a <p> element with <input type=text>
我正在为我的应用程序的用户创建个人资料页面，我想让用户更改他的个人信息。我的想法是当页面加载时，他的个人信息显示在 <p> 标签内的行中。然后当他决定编辑他的信息时，<p> 标签被一个文本框替换，它的值是来自 <p> 标签的文本。
现在的问题是，当我尝试对文本框执行任何操作时，JQuery 似乎对它们 select 无效，即使我已经为文本框分配了一个 ID。
注意控制台中没有显示任何错误
我尝试使用此功能在单击文本框时获取它的 ID。
$(window).click(function(e) {
alert(e.target.id);
});
ID 收到警报，但 JQuery 不想 select 文本框。
这是我的代码。
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");
});
});
在动态创建的元素上绑定事件使用
$(document).on(eventName, selector, function(){});
这是 jsfiddle：http://jsfiddle.net/xpvt214o/881429/
希望我回答了这个问题。
我正在为我的应用程序的用户创建个人资料页面，我想让用户更改他的个人信息。我的想法是当页面加载时，他的个人信息显示在 <p> 标签内的行中。然后当他决定编辑他的信息时，<p> 标签被一个文本框替换，它的值是来自 <p> 标签的文本。
现在的问题是，当我尝试对文本框执行任何操作时，JQuery 似乎对它们 select 无效，即使我已经为文本框分配了一个 ID。 注意控制台中没有显示任何错误
我尝试使用此功能在单击文本框时获取它的 ID。
$(window).click(function(e) {
alert(e.target.id);
});
ID 收到警报，但 JQuery 不想 select 文本框。
这是我的代码。
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");
});
});
在动态创建的元素上绑定事件使用
$(document).on(eventName, selector, function(){});
这是 jsfiddle：http://jsfiddle.net/xpvt214o/881429/
希望我回答了这个问题。