我正在尝试在下面的帖子中添加评论，如(Posted By : Some name from ny text box)和下一行(Comment: )，再次在该帖子下面textarea's value的下一行打印中，所以请尝试我的代码是这里。请告诉我代码中的任何错误。
在我的警报中它工作正常，但不会附加每个帖子。
var cnt;
var name;
$(document).ready(function(){
$('#comment').click(function(){
$('#form1').html("<div class=\"form-group\" ><input type=\"text\" class=\"form-control\" placeholder=\"Please Enter Your Name Or Email\" id=\"namefield\"/> <textarea class=\"form-control\" placeholder=\"Leave A Comment Here\" style=\"width:100%; height:150px;\" id=\"coment-txt\" required></textarea></div><button class=\"btn btn-success\" id=\"post\">Post</button>");
$('#post').click(function(){
cnt = $('#coment-txt').val();
name = $('#namefield').val();
alert('Posted by '+name+'\n'+' Comment : '+'\n'+cnt);
});
});
$('#newcoment').html('Posted by '+name+'\n'+' Comment : '+'\n'+cnt);
});/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.text-justify{
text-align:justify;
}
.cursor{cursor:pointer;}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Samudrala's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Home</a></li>
<li><a href="#section2">Friends</a></li>
<li><a href="#section3">Family</a></li>
<li><a href="#section3">Photos</a></li>
<li><a href="#section3">Likes</a></li>
<li><a href="#section3">DisLikes</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9 sidenav" style="background:#337ab7; color:#fff;">
<h4>RECENT POSTS</h4>
<hr>
<h2>I Like Updated Technologies</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Samudrala, Oct 21, 2016.</h5>
<h5><span class="label label-danger">Updated Technologies</span> <span class="label label-primary">Samudrala</span></h5><br>
<p class="text-justify">Nowadays technology has brought a lot of changes to our life, especially in education and communication. In communication, the major changes happen in the way we communicate with other people. We do not need to meet them in person or face to face to say what is in our mind. We simply can phone them or do video chat using Internet connection. In the past, we spent a long time to travel to a distant place, but now we just need hours or even minutes to go there using the latest technology in a form of transportation means. In education, the changes have brought advantages to students and teachers. For instance, students can do their homework or assignment faster because using Internet. The teachers also get some advantages from it. They can combine their teaching skill with it and produce some interesting materials to teach like colorful slides to deliver the lesson and animation to show how things happen. In conclusion, technology itself has given us advantages to improve our life's quality.
</p>
<p id="newcoment"></p>
<br><br>
<h4>Leave a Comment : <span class="label label-success cursor" id="comment">Comments</span></h4>
<br/>
<form role="form" id="form1">
</form>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
答案 0 :(得分：1)
将附加功能移至点击事件
var cnt;
var name;
$(document).ready(function(){
$('#comment').click(function(){
$('#form1').html("<div class=\"form-group\" ><input type=\"text\" class=\"form-control\" placeholder=\"Please Enter Your Name Or Email\" id=\"namefield\"/> <textarea class=\"form-control\" placeholder=\"Leave A Comment Here\" style=\"width:100%; height:150px;\" id=\"coment-txt\" required></textarea></div><button class=\"btn btn-success\" id=\"post\">Post</button>");
$('#post').click(function(){
cnt = $('#coment-txt').val();
name = $('#namefield').val();
$('#newcoment').html('Posted by '+name+'</br>'+' Comment : '+'</br>'+cnt);
});
});
});/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.text-justify{
text-align:justify;
}
.cursor{cursor:pointer;}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Samudrala's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Home</a></li>
<li><a href="#section2">Friends</a></li>
<li><a href="#section3">Family</a></li>
<li><a href="#section3">Photos</a></li>
<li><a href="#section3">Likes</a></li>
<li><a href="#section3">DisLikes</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9 sidenav" style="background:#337ab7; color:#fff;">
<h4>RECENT POSTS</h4>
<hr>
<h2>I Like Updated Technologies</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Samudrala, Oct 21, 2016.</h5>
<h5><span class="label label-danger">Updated Technologies</span> <span class="label label-primary">Samudrala</span></h5><br>
<p class="text-justify">Nowadays technology has brought a lot of changes to our life, especially in education and communication. In communication, the major changes happen in the way we communicate with other people. We do not need to meet them in person or face to face to say what is in our mind. We simply can phone them or do video chat using Internet connection. In the past, we spent a long time to travel to a distant place, but now we just need hours or even minutes to go there using the latest technology in a form of transportation means. In education, the changes have brought advantages to students and teachers. For instance, students can do their homework or assignment faster because using Internet. The teachers also get some advantages from it. They can combine their teaching skill with it and produce some interesting materials to teach like colorful slides to deliver the lesson and animation to show how things happen. In conclusion, technology itself has given us advantages to improve our life's quality.
</p>
<p id="newcoment"></p>
<br><br>
<h4>Leave a Comment : <span class="label label-success cursor" id="comment">Comments</span></h4>
<br/>
<form role="form" id="form1">
</form>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>