答案 0 :(得分：0)
最好显示和隐藏现有项目，而不是动态创建并插入它们。
额外的功劳，因为没有添加评论超过一个textarea：
$(".AddComment").click(function () {
$("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this);
$("<button class='CancelComment'>Cancel</button>").insertAfter(this);
// Remove the click event and disable the button.
$(this).off("click").prop("disabled", true);
});
我建议的解决方案：
请确保在每个帖子中添加一个类.comment-box和一个style="display: none;"的评论框，然后使用以下事件处理程序。
$(".AddComment").click(function () {
$(this).prev(".comment-box").toggle();
});
此外，您可以让cancel按钮拥有以下事件处理程序：
$(".cancel").click(function () {
$(this).closest(".AddComment").hide();
});
答案 1 :(得分：0)
最好的解决方案是使用css类将每个帖子项包装在一个容器div中，以后我们可以用它来进行jQuery选择。
<div class="postItem">
<h2><a href="#">Killer Rabbit On The Loose</a></h2>
<p>Date: 01/23/2015</p>
<p>Author: Bobert</p>
<button class="AddComment">Add Comment</button>
</div>
<div class="postItem">
<h2><a href="#">Second post</a></h2>
<p>Date: 01/23/2015</p>
<p>Author: Shyju</p>
<button class="AddComment">Add Comment</button>
</div>
在取消按钮点击事件中，获取容器div，找到表单和取消按钮并将其删除，
$(document).on("click",".CancelComment",function (e){
var _this = $(this);
_this.closest(".postItem").find("form").remove();
_this.remove();
});
工作样本here
您需要使用jQuery on方法绑定取消按钮上的click事件，因为它们是由代码动态创建并注入DOM的。
答案 2 :(得分：0)
我会在那里有表格，但隐藏它，以便当你点击按钮时它会出现。然后，您可以使用$('#buttonId').prop('disabled', true);
这会阻止任何进一步的点击，尽管点击无论如何都无关紧要，因为您只有一个表单可以显示，因此它不会再弹出。
单击取消按钮应触发一个删除有问题的textarea内容的函数，隐藏表单/ textarea并重新启用注释按钮
show_comment：
function show_comment(){<br>
$('#formId').show();<br>
$('#cancelButton').show();<br>
$('#commentButton').prop('disabled', true)<br>
}
remove_comment：
function remove_comment(){<br>
$('#textareaId').html('');<br>
$('#commentButton').prop('disabled', false);<br>
$('#cancelButton').hide();
}
答案 3 :(得分：0)
<script type="text/javascript">
$('.AddComment').one('click',function(e){
e.preventDefault();
var bt=$(this);
var el=$('<textarea name="comment" />');
el.insertBefore(this);
bt.text('Send comment').on('click',function(e){
if (el.val().length==0){
alert("Please fill the comment before send.");
el.focus(); //Delete this row if you don't want user to focus on the textarea.
return false;
}
$.ajax({
type: 'POST',
data : el,
cache: false,
url: 'postUrl.php',
success: function(data){
bt.after($('<b>Comment sent</b>').hide().fadeIn());
bt.add(el).hide();
}
})
})
})
</script>
答案 4 :(得分：0)
代码中的问题。
请查看以下代码是否解决了您的问题。 我也在添加注释文本区域后禁用添加按钮，这样就不会添加更多文本区域
$(document).ready(function(){
$(".AddComment").click(function () {
var $addCommentBtn = $(this),
$commentTextArea;
$addCommentBtn.prop( "disabled", true );
$commentTextArea = $("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this);
$("<button class='CancelComment'>Cancel</button>").insertAfter(this).click(function (){
$commentTextArea.remove();
$(this).remove();
$addCommentBtn.prop( "disabled", false );
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>News Entries</title>
</head>
<body>
<h2><a href="#">Killer Rabbit On The Loose</a></h2>
<p>Date: 01/23/2015</p>
<p>Author: Bobert</p>
<p>Subject: Animals</p>
<p>Most Recent Comment: None Yet.</p>
<button class="AddComment">Add Comment</button>
<h2><a href="#">Porsche Unveils Ultra Fast Minivan</a></h2>
<p>Date:02/14/2015</p>
<p>Author: Jimmy</p>
<p>Subject: Cars</p>
<p>Most Recent Comment:</p>
<p>This is genius on Porsche's behalf! I can drop off the kids at school, go grocery shopping and still have time to go racing with my buddies. All without worrying that my emissions aren't falsified and polluting the world. --SemiProRacer997</p>
<button class="AddComment">Add Comment</button>
<h2> <a href="#">Apple Releases iPhone Inifity</a></h2>
<p>Date:03/11/2015</p>
<p>Author: Frank</p>
<p>Subject: Technology</p>
<p>Most Recent Comment:</p>
<button class="AddComment">Add Comment</button>
</body>
</html>