使用 .replaceWith() 函数将元素替换为<输入类型=文本后，JQuery 未选择特定元素> - JQuery not selecting specific element after using .replaceWith() function to replace a element with <input type=text> 小贝子编程网

我正在为我的应用用户创建一个个人资料页面，我想让用户更改他的个人信息。我的想法是，当页面加载时，他的个人信息会在标签内成行显示。然后，当他决定编辑他的信息时，标签将替换为文本框，其值是来自标签的文本。

现在的问题是，当我尝试对文本框做任何事情时，即使我已经为文本框分配了 id，JQuery 似乎也不会选择它们。注意：控制台中不显示任何错误

当我使用此功能单击文本框时，我尝试获取文本框的 id。

$(window).click(function(e) {
alert(e.target.id);
});

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">&nbsp;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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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/

希望我回答了这个问题。

使用 .replaceWith() 函数将元素替换为<p><输入类型=文本后，JQuery 未选择特定元素>

相关内容

最新更新

热门标签：